HTML Input Element Types

In the previous chapter of HTML forms we have learnt about HTML forms Control Elements. In that chapter we have also discussed that the <input> element is the most important HTML from element among all. The reason of that the <input> element can be used in many ways by using ‘type’ attribute.

Now we will see that how HTML input used in different ways more descriptively.

Input type ‘text’


Input type text defines the single line text input field. Input type text is default type of input element. Input type text can be used with ‘name’, ’value’, ‘size’, ‘placeholder’, ‘id’, ‘maxlength’ etc. attributes.


<form>
 <label for = "fname">First Name: <label>
 <input type = "text" name = "fname" id = "fname" />
 <label for = "lname">Last Name: <label>
 <input type = "text" name = "lname" id = "lname" />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Above example will be displayed on web browser like below result


Input type ‘password’


Input type password is defines a password field. The character typed in password field is masked and shows as asterisk or circle. Input type password can be used with ‘name’, ’value’, ‘size’, ‘placeholder’, ‘id’, ‘maxlength’ etc. attributes.


<form>
 <label for = "name">Name: <label>
 <input type = "text" name = "name" id = "name" placeholder = "Type your name here"/>
 <label for = "lname">Password<label>
 <input type = "password" name = "pass" id = "pass" minlength = "4" maxlength = "6" placeholder = "Type password here"/>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Above example will be displayed on web browser like below result. Type anything in password field and see how it works.


Input type ‘number’


Input type ‘number’ defines a numerical input field. In numerical input field users are allow to input numbers only. Numerical input field can be restricted with range of inputs but using ‘min’ and ‘max’ attributes. Shown in Example


<form action = "" method = "GET">
 <label for = "qty">Quantity: <label>
 <input type = "number" name = "qty" id = "qty" min = '5' max = '15' value = '10'/>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘submit’


Input type ‘submit’ defines a submit button which submits the form data to a form-handler. Form-handler is a server side script page that process the form input data. Form-handler URL defined in the form action attribute. Check the below example:


<form>
 <label for = "fname">First Name: <label>
 <input type = "text" name = "fname" id = "fname" />
 <label for = "lname">Last Name: <label>
 <input type = "text" name = "lname" id = "lname" />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

If we delete the type attribute in submit button but it will be converted into a single line text input field by default.

Input type ‘button’


Input type ‘button’ looks similar to submit button but it don’t act as a form handler. Input buttons dose not submit a form, they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.


<form action = "" method = "GET">
 <label for = "fname">First Name: <label>
 <input type = "text" name = "fname" id = "fname" />
 <label for = "lname">Last Name: <label>
 <input type = "text" name = "lname" id = "lname" />
 <input type  = "button" name = "submit" value = "Save" onclick = "alert('The form is not submitted')" />
</form>

Input type ‘checkbox’


Input type ‘charckbox’ is used when one or more options are to be selected with limited numbers of choices. Checkbox can be used with ‘name’, ’value’, ‘id’ attributes.


<form action = "" method = "GET">
 <h4>Movies Name :</h4>
 <input type = "checkbox" name = "ironman" id = "ironman" value = "Iron-Man" />
 <label for = "ironman">Iron-Man<label><br />
 <input type = "checkbox" name = "thor" id = "thor" value = "Thor - The Dark World" />
 <label for = "thor">Thor - The Dark World<label><br />
 <input type = "checkbox" name = "captain" id = "captain" value = "Captain America - Civil War"/>
 <label for = "captain">Captain America - Civil War<label><br />
 <input type = "checkbox" name = "avenger" id = "avenger" value = "Avenger - Infinity War" checked />
 <label for = "science">Avenger - Infinity War<label><br /><br />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘radio’


Input type ‘radio’ allows users to select only one option among multiple choices. Radio buttons can be used with ‘name’, ’value’, ‘id’ attributes.


<form action = "" method = "GET">
 <h4>Movies Name :</h4>
 <input type = "radio" name = "movie" id = "ironman" value = "Iron-Man"/>
 <label for = "ironman">Iron-Man<label><br />
 <input type = "radio" name = "movie" id = "thor" value = "Thor - The Dark World" />
 <label for = "thor">Thor - The Dark World<label><br />
 <input type = "radio" name = "movie" id = "captain" value = "Captain America - Civil War"/>
 <label for = "captain">Captain America - Civil War<label><br />
 <input type = "radio" name = "movie" id = "avenger" value = "Avenger - Infinity War" checked />
 <label for = "science">Avenger - Infinity War<label><br /><br />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘range’


Input type ‘range’ specifies a range element which allows the user to input a numerical value that must be equal or between the given values. Range can use in HTML forms with ‘min’, ‘max’, ‘value’ and ‘step’ attributes. Check the example


<form action = "" method = "GET">
 <input type = "range" min = "0" max = "20" value = "10" step = "5"/>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Range can also used with data-list and labels but these features are not fully supported by all web browsers. Data-list specifies the hash marks on the top of range element which shown in the below example.


<form action = "" method = "GET">
 <input type = "range" list = "makrs" min = "0" max = "100" step = "10"/>
  <datalist id = "makrs">
   <option value = "0" label = "0" />
   <option value = "10">
   <option value = "20">
   <option value = "30">
   <option value = "40">
   <option value = "50"label = "50" />
   <option value = "60">
   <option value = "70">
   <option value = "80">
   <option value = "90">
   <option value = "100"label = "100" />
  </datalist>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘email’


Input type email specifies a text input which allows the users to enter email address. The input value is automatically validated to ensure that it's either empty or a properly-formatted email address (or list of addresses) before the form can be submitted. If input type email is used with multiple attribute then it can accept more than one email address at once separated by comma ( , ). Input type email can be used with ‘name’, ‘size’, ‘placeholder’, ‘multiple’, ‘minlength’,  ‘maxlength’, ‘value’, ‘list’, ‘pattern’ etc attributes.


<form action = "" method = "GET">
 <input type = "email" minlength = "15" maxlength = "20"/>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type email is used as predefined data-list of multiple email addresses. You can select one or more email addresses at once separated by comma ( , ).


<form action = "" method = "GET">
 <input type = "email" list = "add_mail" placeholder = "type multiple email addresses here separated by comma (,)" size = "50" multiple />
  <datalist id = "add_mail">
   <option value = "abc@example.com">abc@example.com</option>
   <option value = "xyz@example.com">xyz@example.com</option>
   <option value = "def@example.com">def@example.com</option>
  </datalist>
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘date’


Input type date specifies an input field that contains a date-picker (calendar type) interface. Date input type allow user to enter a date either using a text input that automatically or using a date-picket interface. Input type date can be used with ‘name’, ‘min’, ‘max’, ‘value’, ‘id’ etc. attributes.


<form action = "" method = "GET">
 <input type = "date" name = "save_date" min = "2018-07-02" max = "2018-07-07" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" required />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type ‘file’


Input type file specifies file selection field along with file browsing button which allows users to upload the image or other files. Whenever using input type file in HTML form then ‘enctype = multipart/form-data’ must be specify in form tag like in example shown below.


<form action = "" method = "POST" enctype = "multipart/form-data">
 <label>Choose to Upload file : </label><input type = "file" name = "upload" />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

In above example we can upload only one file at once but if we want to upload multiple files in a single submission then we need to specify ‘multiple’ attribute in the file element. After that we can select more than one file by pressing ‘shift’ or control.


<form action = "" method = "POST" enctype = "multipart/form-data" >
 <label>Choose to Upload file : </label><input type = "file" name = "upload" accept = "“.png, .jpg, .jpeg" multiple />
 <input type  = "submit" name = "submit" value = "Save" />
</form>

Input type file cannot validate file itself therefore to validate file types we need to use ‘accept’ attribute. ‘accept’ attribute can validate files automatically which is allowed. Acceptable file types can be specified with the ‘accept’ attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

accept = “image/png” or accept = “.png” – Accepts only PNG files.
accept = “image/png, image/jpg, image/jpeg” or accept = “.png, .jpg, .jpeg” – Accepts PNG or JPEG files.
accept = “image/*” – Accepts any type of image file. Some of the mobile devices allow the users to upload the images directly using camera.
accept = ".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Accept anything that like an MS Word document.




Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

3 comments: