HTML 5 <input> Elements

HTML 5 <input> Element used to take input from user in the form of Text, Number, Email and Image. Some of the input type are given below :

  • Text input type

  • Name:
    <input type="text" name="your_name" 
    	size="25" value="">

  • Email input type

  • Email:
    <input type="email" name="email" size="25" value="">

  • Number input type

  • Age:
    <input type="number" name="age" value="">

  • Radio input type

  • Gender:  Male  Female  Other
    <b>Male</b><input type="radio" name="gender" value="Male">
    <b>Female</b><input type="radio" name="gender" value="Female">
    <b>Other</b><input type="radio" name="gender" value="Other">

  • Checkbox input type

  • Hobbies: Cricket Cooking Drawing
    <input id="Cricket" type="checkbox" name="Cricket"
    	value="Cricket"><b>Cricket</b>
    <input id="Cooking" type="checkbox" name="Cooking"
    	value="Cooking"><b>Cooking</b>
    <input id="Drawing" type="checkbox" name="Drawing"
    	value="Drawing"><b>Drawing</b>
    

  • DropDown input type

  • Country:
    <select name="country">
    <option value="None selected">
    Please select below
    </option>
    <option value="Afghanistan">
    Afghanistan
    </option>
    <option value="Albania">
    Albania
    </option>
    </select>

  • Comment input type

  • Comments
    <textarea name="comments" rows="4"
    	maxlength="200" cols="22">
    

  • Hidden input type

  • <input type="hidden" name="your_ip" value="">
    Note:Input type="hidden" is useful for situations when you might want to gather data not supplied by the person filling out the form. Here I use a hidden input tag to collect your IP address.

  • Button input type

  • <input type="submit" name="submit" value=" Submit ">
    Note:Input type="submit" displays as a button with the contents of the "value" attribute written on the button.

  • Date input type

  • Birthday
    <input type="date" name="bday">

  • Time input type

  • Select a time
    <input type="time" name="usr_time">

  • Week input type

  • Select a week
    <input type="week" name="year_week">

  • Image input type

  • Click on go
     <input type="image" src="./../images/html5/go.png"
     	alt="Submit" width="48" height="48">