Input Element Types in HTML Form | Basic Attributes of Input Element

Input Element Types

Last time we have seen, Elements of Forms in HTML. Now we are going to learn about the Types of Input Elements of Form. So let's get started...

---

Input Elements Types of Form

In HTML, Form includes various Input Element Types which is used to create various Input Components. Let's take a look at them...

• <input type="text"> 
• <input type="password"> 
• <input type="email"> 
• <input type="radio"> 
• <input type="checkbox"> 
• <input type="submit"> 
• <input type="reset"> 
• <input type="button"> 
• <input type="number"> 
• <input type="time"> 
• <input type="date"> 
• <input type="datetime-local"> 
• <input type="week"> 
• <input type="month"> 
• <input type="color"> 
• <input type="image"> 
• <input type="search">

---

1. <input type="text">

The Input Type Text creates the TextField on the web page, which can contain Single-line input text.

Example : 

<form>
    <label for="name">Enter Name : </label> 
    <br>
    <input type="text" id="name" name="name" >
</form>

---

2. <input type="password">

The Input Type Password creates the Input field on the web page, which can contain only passwords from the user. It also applies password restrictions to the user input data, by using a Regular Expression i.e. pattern attribute.

Example : 

<form>
    <label for="uname">Username : </label> 
    <br>
    <input type="text" id="uname" name="uname" > 
    <br>
    <label for="pass">Password : </label> 
    <br>
    <input type="password" id="pass" name="pass" >
</form>

---

3. <input type="email">

The Input Type Email creates the Input field on the web page, which can contain Emails from the user. It also applies email restrictions to the user input data.

Example : 

<form>
    <label for="mail">E-mail ID : </label> 
    <br>
    <input type="email" id="mail" name="mail" > 
    <br>
    <label for="pass">Password : </label> 
    <br>
    <input type="password" id="pass" name="pass" >
</form>

---

4. <input type="radio">

The Input Type Radio is used to create the RadioButton on the web page. This element type allows the user to select any one choice among the group of choices.

Example : 

<form>
    <input type="radio" id="java" name="lang" value="java" > 
    <label for="java">Java </label> 
    <br>
    <input type="radio" id="python" name="lang" value="python" > 
    <label for="python">Python</label> 
</form>

---

5. <input type="checkbox">

The Input Type Checkbox is used to create the Checkbox on the web page. This element type allows the user to select any number of choices among the group of choices.

Example : 

<form>
    <input type="checkbox" id="grapes" name="fruits" value="grapes" > 
    <label for="grapes">I like Grapes</label> 
    <br>
    <input type="checkbox" id="mango" name="fruits" value="mango" > 
    <label for="mango">I like Mango</label> 
</form>

---

6. <input type="submit">

The Input Type Submit creates the Button on the web page, which is used to submit user input data of the form to its respective server.

Example : 

<form>
    <label for="uname">Username : </label> 
    <br>
    <input type="text" id="uname" name="uname" > 
    <br>
    <label for="pass">Password : </label> 
    <br>
    <input type="password" id="pass" name="pass" >
    <br>
    <input type="submit" value="Submit">
</form>

---

7. <input type="reset">

The Input Type Reset creates the Button on the web page, which is used to reset the user input data of the form to its initial value i.e. empty fields.

Example : 

<form>
    <label for="uname">Username : </label> 
    <br>
    <input type="text" id="uname" name="uname" > 
    <br>
    <label for="pass">Password : </label> 
    <br>
    <input type="password" id="pass" name="pass" >
    <br>
    <input type="reset" value="Reset">
</form>

---

8. <input type="button">

The Input Type Button creates the simple Button on the web page. This button is mostly used for Events on the webpage.

Example : 

<form>
    <input type="button" value="Click Me...">
</form>

---

9. <input type="number">

The Input Type Number creates the field on the web page, which asks the user to select the number from the defined limit of numbers.

Example : 

<form>
    <label for="num">Select No. : </label> 
    <br>
    <input type="number" id="num" name="num" min="1" max="10"> 
</form>

---

10. <input type="time">

The Input Type Time creates the field on the web page, which asks the user to select the Time. This time field is also known as Time Picker.

Example : 

<form>
    <label for="tm">Choose Time : </label> 
    <br>
    <input type="time" id="tm" name="tm" > 
</form>

---

11. <input type="date">

The Input Type Date creates the field on the web page, which asks the user to select the Date. This Date field is also known as Date Picker. It is mostly used for Birth Dates.

Example : 

<form>
    <label for="birthday">Birth Date : </label> 
    <br>
    <input type="date" id="birthday" name="birthday" > 
</form>

---

12. <input type="datetime-local">

The Input Type DateTime-Local creates the field on the web page, which asks the user to select the Date and Time both at a time.

Example : 

<form>
    <label for="birth-date-time">Birth Date & Time : </label> 
    <br>
    <input type="datetime-local" id="birth-date-time" name="birth-date-time" > 
</form>

---

13. <input type="week">

The Input Type Week creates the field on the web page, which asks the user to select the Week and Year both at a time.

Example : 

<form>
    <label for="wk">Choose Week : </label> 
    <br>
    <input type="week" id="wk" name="wk" > 
</form>

---

14. <input type="month">

The Input Type Month creates the field on the web page, which asks the user to select the Month and Year both at a time.

Example : 

<form>
    <label for="mnth">Choose Month : </label> 
    <br>
    <input type="month" id="mnth" name="mnth" > 
</form>

---

15. <input type="color">

The Input Type Color creates the field on the web page, which asks the user to select the Color. It displays the Color Picker with the RGB values.

 

Example : 

<form>
    <label for="clr">Choose your Favourite Color : </label>
    <input type="color" id="clr" name="clr" > 
</form>

---

16. <input type="image">

The Input Type Image is used to display the image on the webpage as the Button.

 

Example : 

<form>
    <input type="image" src="https://bit.ly/3IhGZFG" alt="Audy" width="120" height="70" > 
</form>

---

17. <input type="url">

The Input Type URL creates the TextField on the web page, which should contain only the URL Address.

Example : 

<form >
  <label for="web-page">Web-page URL : </label>
  <input type="url" id="web-page" name="web-page">
</form>

---

Basic Attributes of Input Elements

Attribute	Description
size	Defines the width of the Input field.
value	It is a pre-defined value for an Input field.
min	Defines the minimum value to the Input field.
max	Defines the maximum value of the Input field.
maxlength	Defines the maximum no. of characters in the Input field.
placeholder	It defines as the pre-defined background text for an Input field, with low opacity.
checked	It is used for the pre-selection of Input Element Components like checkbox and radio-button.
disabled	Disables the Input field i.e. user can't edit it or write in it.
required	Defines that the Input field shouldn't be empty.
readonly	It disallows the user from editing the Input field.
pattern	It is used for Regular Expression to check the value against the requirement in the expression. Mostly used for Mobile numbers fields.

---

So, now it's time to end the session. See you guys Next Time, stay tuned for further updates on HTML Programming Languages...!!!

Our website will definitely help you to improve your Programming Skills and Knowledge.

Thanks for Visiting...!!!

---

Also Visit

---