Form Elements/Controls ?

There are many form elements, which is used in a form. Normally a Form is created by a <form> tag. Like below: 

<form>

// form elements
......... 
........
........

</form>

So the form elements that is used inside form tags are :
  • Input element : Used to make text input, password input, checkbox, radiobox, file select
  • Textarea element
  • Select element
  • button : used to make submit button, reset button and normal button
Input element

Input elements or <input> tag are used to make text input, checkbox, radiobox, file select and password element.
Now the way to make a very simple textbox is by this: 

<input>

or

<input type="text" >


Before moving any further, we need to understand basic attributes on this input tag/element.

Since we are using input elements to make text input, checkbox, radiobox, file select and password element majorly so the very basic attribute that will exists in every input element , i will explain first (easy to remember too) and then specific attribute for individual input elements. Sound right ?


Please observe that all of this attributes are optional and upto developer to use as per his needs.
The most common attribute on all input element is :
  • type : It will define what kind of element it will be. Its value can either be : text or password or button or checkbox or radio or number or button or reset or submit or range or tel or file or color or date.
  • name : The name of input element.
  • value : The value of input element, initially empty string but on typing or clicking radiobox or checkbox it will contain the typed value or radio box value or checkbox value.
Specific attribute for text input element and password input element
The specific attribute on <input type="text"> and <input type="password"> element is :
  • size : It will define the width of input element in terms of number of characters it can type without sliding the characters left. Obviously we can type any number of characters here.
  • maxlength : The maximum number of characters we can type. 
<form>
  <input type="text" name="firstName" value="Andy" maxLength="18">
</form>
Specific attribute for radio input element and Checkbox input element
The specific attribute on <input type="radio"> and <input type="checkbox"> element is :
  • checked : If you make this attribute true then radio box or checkbox will be checked else will be unchecked. 
<form>

  // radiobox
  <input type = "radio" name = "male" value = "male" checked> Male
  <input type = "radio" name = "male" value = "male" checked={true}> Male
  <input type = "radio" name = "male" value = "male" checked={false}> Male

  // checkbox
  <input type = "checkbox" name = "termsAndConditions" value = "terms" checked> I have read terms and conditions.
  <input type = "checkbox" name = "termsAndConditions" value = "terms" checked={true}> I have read terms and conditions.
  <input type = "checkbox" name = "termsAndConditions" value = "terms" checked={false}> I have read terms and conditions.
</form>
Specific attribute for file upload input element
The specific attribute on <input type="file"> element is :
  • accept : it will define the type of file browser will accept.
    e.g:
    image/* : Accepts all image types.
    image/jpg : Accepts only jpg image type.
    image/png : Accepts only png image type.
<form>
  <input type = "file" name = "profilePic" accept = "image/*" />
  <input type = "file" name = "profilePicOne" accept = "image/jpg" />
  <input type = "file" name = "profilePicTwo" accept = "image/png" />
</form>
Textarea element
Textarea elements or <textarea> tag are used to make textarea element. We use this textarea tag when the input element is insufficient for our use. As with textarea tag we can type text in multiple rows and more content than input element. I hope you understood the difference too.
The most common attribute on all textarea element is :
  • name : The name of textarea element.
  • value : The value of textarea element, initially empty string but on typing it will contain the typed value.
  • rows : It will define the number of rows of textarea (can be visible in UI).
  • cols : It will define the number of columns of textarea (can be visible in UI). 
<form>
  <textarea name="bio" value="This is my bio" rows="4" cols="12">
</form>
Select element
Select elements or <select> tag are used to make select dropdown element. We use this Select tag when we need a dropdown in our UI and if we want to choose one out of many items mostly or if you want to choose multiple items.
The most common attribute on all select element is :
  • name : The name of select element.
  • multiple : If set to true, multiple elements can be selected in dropdown.

Now select element wraps multiple option tag to represent multiple options, which can be selected and forms the items of dropdown.
The most common attribute on all option element is :
  • value : The value that will be selected if clicked upon in select element.
  • selected : If set to true, that option elements will be selected from dropdown.

Now the way to write is:: 
// Default scenario, nothing is selected
<form>
  <select name = "country">
    <option value = "norway">Norway</option>
    <option value = "brazil">Brazil</option>
    <option value = "india">India</option>
  </select>
</form>

// A pre selected scenario
<form>
  <select name = "country">
    <option value = "norway" selected>Norway</option> // this one is selected
    <option value = "brazil">Brazil</option>
    <option value = "india">India</option>
  </select>
</form>
Button element

Button elements or <button> tag is used to make a button.
Now there are many ways of making a button in html. 

 // These 3 are same, you can use anyone.
<input type="button" value="submit" name="submit">
<button>Click me</button>
<button type="button">Click me</button>

// These 2 are same, you can use anyone.
<input type="submit" value="deploy" name="deploy">
<button type="submit">Submit me</button>

// These 2 are same, you can use anyone.
<input type="reset" value="reset" name="clearAll">
<button type="reset">Reset me</button>

Now i will explain only one here, which can be little tricky.
  • <input type="button"> : It will create a button and the attribute "value" will be the label of button. As with the "name" attribute, it is naming that input element.
  • <input type="submit"> : It will create a very special submit button that is used to submit form values to server and the attribute "value" will be the label of button. As with the "name" attribute, it is naming that input element.
    Even <button type="submit"> does the same task.
  • <input type="reset"> : It will create a very special reset button that is used to reset form values and the attribute "value" will be the label of button. As with the "name" attribute, it is naming that input element.
    Even <button type="reset"> does the same task.



Note::
Please do not forget that <input>, <button> , <textarea> or <select> tags are inline block level elements. And if you remember, these are those html tags/elements which occupies only as much space as is its content (property coming from inline elements) plus we can set its width and height and all its margins and paddings (property coming from block level elements).
More than one inline-block elements normally sit side by side on the same line. (you can change this by applying css obviously).

PrevNext