HomeWeb DesignHTMLList of HTML Input Types With Examples

List of HTML Input Types With Examples

List of HTML Input Types With Examples

Input Type Text

it defines a single-line text input field on a web page:

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Text field in HTML </h2>

<form action="">
  First Name: <input type="text"><br> <br>
  Last name: <input type="text"> <br> <br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Password

It is used to display a password field:

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Password field</h2>

<form>
  Enter Username: <input type="text" id="username" name="username"><br> <br>
  Enter Password: <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Input Type Submit

It defines a Submit Button to process User’s data.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Submit Button in HTML </h2>


<form>
  First name: <input type="text"><br><br>
  Last name:  <input type="text"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Input Type Reset

It is used to reset all form values to their default values

<!DOCTYPE html>
<html>
<body>

<h2>Reset Button: HTML </h2>


<form>
  First name: <input type="text"><br><br>
  Last name: <input type="text"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form> 

</body>
</html>

Input Type Radio

It is used to select ONLY ONE choice of a limited number of choices. usually, it is used for defining the Gender.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>How to Use Radio Buttons in HTML </h2>

<form>
     Male:  <input type="radio"> <br>
    Female:  <input type="radio"> <br>
    Others:  <input type="radio"> 
</form> 

</body>
</html>

Input Type Checkbox

It is used to select One or MORE options of a limited number of choices.

Syntax: <input type=”checkbox”>

Example:

<!DOCTYPE html>
<html>
<body>

<form>

<h2> Education Qualification: </h2>
  <input type="checkbox"> BCA <br>
  <input type="checkbox"> B.SC. <br>
  <input type="checkbox"> MCA <br>
  <input type="checkbox"> M.SC. <br>
</form> 

</body>
</html>

Input Type Button

It is used to display a button on a web page.

Syntax: <input type=”button”>

Example:

<!DOCTYPE html>
<html>
<body>

<form>

<h2> Education Qualification: </h2>
  <input type="checkbox"> BCA <br>
  <input type="checkbox"> B.SC. <br>
  <input type="checkbox"> MCA <br>
  <input type="checkbox"> M.SC. <br> <br>
  <input type="button" value="Submit Data">
</form> 

</body>
</html>

Input Type Color

It is used for input fields that should contain a color.

Syntax: <input type=”color”>

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Pick a Color for a Web Page </h2>

<form>
  Select Color: <input type="color" value="#0000ff"> <br> <br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

- Advertisment -

Latest Articles