HTML Form Input Element

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:20 mins read
You are currently viewing HTML Form Input Element

The input element helps you to take input from the user. What type of input (like text, password, checkbox, etc.) want to from a user you have to mention it in the input element type attribute.

The input element is one of the important elements of HTML form it can take many types of input like text, password, date, time, color, email, etc.

Input Element – Syntax

The input element has only the starting tag, it don’t have closing tag like img tag.

<form>
<label for="name">Enter Your Name</label>
<input type="text" id="name">
Other Form Elements...
</form>

The input Element – Attributes

Here is the full list of input element attributes.

  • type – the type attribute decides what type of input takes the input element.
  • value – the value attributes specify the default value of an input field.
  • readonly – the readonly attribute declared that the input field is read-only, the user can’t modify the input field default value.
  • disabled – the disabled attribute specifies that the input field has been disabled. Even when the form is submitted this field value will not be submitted.
  • size – the size attributes specify the width of the input field when a user manually inputs any text or number.
  • maxlength – the maxlength attribute specifies the maximum number of characters a user can input.
  • min – the min attribute set a minimum range of an input field
  • max – the max attribute set a maximum range of an input field
  • multiple – the multiple attribute value allow the user to input more than one value.
  • pattern – The pattern attribute specifies an input pattern. The pattern will be checked before submitting the form.
  • placeholder – the placeholder attributes contain a hint text that describes what the value the input field accepts.
  • required – the required attribute declared that the input field must be fill. Without filling the field the form data should not be submitted.
  • step – the step attribute specifies intervals of the input field.
  • autofocus – the autofocus attribute specifies that the input field automatically focused when the page is loaded.
  • list – the list attribute specifies a datalist element which has a pre-defined list.
  • autocomplete – the autocomplete attribute for the input field specifies that the input should autocomplete or not.

Input Element – Type Attribute values

The type attribute decide what type input should be take on the input element.

ValueDescription
textdefine text type input
numberdefine number type input
passworddefine password type input
datedefine date type input
emaildefine email type input
urldefine input type is URL
teldefine telephone number input
datetime-localdefine date and time input
timedefine time input
weekdefine week and year input
colorallow users to select color
fileallow user to select file
checkboxallow users to mark a box
radiodefine a radio button
rangedefine a range controller
buttondefine a button
submitdefine a submit button
resetdefine a reset button
searchdefine a search field

Type Attribute Value – text

The type attribute value text defines a one line text input box. This box is generally used for input name, address, etc.

Example

<form action="actin_page">
<label for="name">Enter Name</label>
<input type="text" id="name" name="user_name">
</form>

Result

Type Attribute Value – number

The type attribute value number defines a number input box. The box only contain numbers like zip code, mobile number, pin number, etc.

Example

<form action="actin_page">
<label for="number">Enter Number</label>
<input type="number" id="number" name="user_number">
</form>

Result

Type Attribute value – password

The type attribute value password defines a password input box. This input is generally used to taking a password or pin. The character is hidden when you type something.

Example

<form>
<label for="password">Enter Password</label>
<input type="password" id="password" name="pass">
</form>

Result

Type Attribute value – date

The type attribute value date enables users to select or enter a particular date. This input is used to enter like date of birth, festival date.

Example

<form>
<label for="dob">Select Date of Birth</label>
<input type="date" id="dob" name="birth_date">
</form>

Result

Type Attribute value – email

The type attribute value email define a email input box. The email pattern should be validate in default by the browser before submitting the form.

Example

<form action="action_page">
<label for="email">Enter your Email Address</label>
<input type="email" id="email" name="email_id">
</form>

Result

Type Attribute Value – url

The type attribute value url allows user to enter a url. This input type is used for take website url.

Example

<form action="action_page">
<label for="url">Enter your url</label>
<input type="url" id="url" name="web_address">
</form>

Result

Type Attribute Value – tel

The type attribute value tel define a telephone number input box. These inputs are used to take a telephone number.

Example

<form action="action_page">
<label for="tel">Enter your url</label>
<input type="tel" id="tel" name="telephone">
</form>

Result

Type Attribute value – datetime-local

the type attribute value datetime-local allows users to select or enter date and time with no time-zone.

Example

<form action="action_page">
<label for="datetime">Enter your url</label>
<input type="datetime-local" id="datetime" name="date_time">
</form>

Result

Type Attribute Value – time

The type attribute value time allow users to select or enter time.

Example

<form action="action_page">
<label for="time">Select the time</label>
<input type="time" id="time" name="_time">
</form>

Result

The Type Attribute Value – week

The type attribute value week allow users to select the week in input box.

Example

<form action="action_page">
<label for="week">Select the Week</label>
<input type="week" id="week" name="_week">
</form>

Result

Type Attribute value – color

The type attribute value color allows users to select the color in the input box throw a color picker.

Example

<form action="action_page">
<label for="color">Select the Color</label>
<input type="color" id="color" name="selected_color">
</form>

Result

The Type Attribute value – file

The type attribute value file defines to select a file in input box.

Example

<form action="action_page">
<label for="file">Select the file</label>
<input type="file" id="file" name="selected_file">
</form>

Result

Type Attribute value checkbox

The type attribute value checkbox create a checkbox.

Example

<form action="action_page">
<label for="check">Check if you above 18</label>
<input type="checkbox" id="check" name="checke_box">
</form>

Result

The Type Attribute value – radio

The type attribute value radio defines a radio input button. It allows the user to select one item from multiple items.

Example

<form action="action_page">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</form>

Result


Tips- You have to give the same value to the name attribute, it tells the browser user can select one item. If you give the different value to the name attribute then the user can select multiple items.

The Type Attribute value – range

The type attribute value range gives users a controller for select number. You can restrict for a minimum value and a maximum value through the min and max attribute and also set the step using the step attribute.

Example

<form action="action_page">
<input type="range" id="range" name="set_range">
</form>

Result

The type Attribute value – button

The type attribute value button defines a button.

Example

<form action="action_page">
<input type="button" id="button" value="play">
<input type="button" id="button" value="pause">
</form>

Result

Type Attribute value – submit

The type attribute value submit defines a submit button to sent from data to the action page.

Example

<form action="action_page">
<input type="submit" value="submit">
</form>

Result

Type Attribute Value – reset

Type attribute value reset defines a reset button which reset the all form input values to their default value

Example

<form action="action_page">
<input type="reset" value="reset">
</form>

Result

Type Attribute value – search

Type Attribute value search defines a search button.

Example

<form action="action_page">
<label for="search">Search</label>
<input type="search" id="search" name="user_search">
</form>

Result

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply