Advertisement

Advertisement


Form Input Types

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user.

Input Type Text

The <input type="text"> defines a single line text input field. By default a field text can take 20 Characters.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Text </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>

Output

HTML Form Input Type Text Attribute Examples
First name: Last name:

Input Type Password

The <input type="password"> defines a password field. It will show bullets in place of actual characters during input.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Password </title>
</head>
<body>
<form action="#">
User name:
<input type="text" name="userid">
User password:
<input type="password" name="psw">
</form>
</body>
</html>

Output

HTML Form Input Type Password Attributes
User name: User password:

Input Type Submit

The <input type="submit"> defines a Submit button that submit form data to a form-handler.
The form-handler is a type of server page with a script for processing form input data and It is specified in the form's action attribute


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Submit </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>

Output

HTML Form Input Type Submit Button Attribute
First name: Last name:

Input Type Reset

The <input type="reset"> defines a Reset button.
If you want to change the input values then click the "Reset" button, the form-data will be reset to the default values.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Reset </title>
</head>
<body>
<form action="action-page.php">
First name:<br>
<input type="text" name="firstname" value="John">
Last name:<br>
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>

Output

HTML Form Input Type Reset Button Examples
First name: Last name:

Input Type Radio

The <input type="radio"> defines a Radio button. It is used where only one option out of many has to be selected.

The name attribute in all the buttons should have same value, then only a distinct value will get selected. The Radio buttons let a user to select ONLY ONE of a limited number of choices.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Radio Button </title>
</head>
<body>
<form action="action-page.php">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<input type="submit">
</form>
</body>
</html>

Output

HTML Form Input Type Radio Button Attribute
Male
Female
Other


Input Type Checkbox

The <input type="checkbox"> defines a checkbox. It can be used to select multiple options at a time.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Checkbox </title>
</head>
<body>
<form action="action-page.php">
<input type="checkbox" name="vehicle1" value="Bike">Samsung
<input type="checkbox" name="vehicle2" value="Car">Google Pixel>
<input type="submit">
</form>
</body>
</html>

Output

HTML Form Input Type Checkbox
Samsung Google Pixel


Input Type Button

The <input type="button"> defines a button.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Button </title>
</head>
<body>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>

Output

HTML Form Input Type Button Attribute

Input Type Number

The <input type="number"> defines a numaric input field. The number attribute set restrictions on what numbers are accepted. You can set the min or max number.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Number </title>
</head>
<body>
<form action="action-page.php">
Quantity (between 1 and 10):
<input type="number" name="quantity" min="1" max="10">
<input type="submit">
</form>
</body>
</html>

Output

HTML Form Input Type Number Attribute
Quantity (between 1 and 10):

Form Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5).

Attribute
New
Description
disabled It specifies to disabled the input field.
max
It specifies maximum value for an input field.
maxlength It specifies the maximum number of character for an input field.
min
It specifies the minimum value for an input field.
pattern
It specifies a regular expression to check the input value against.
readonly It specifies that an input field is read only that cannot be changed.
required
It specifies that an input field is require.
size It specifies the width (in characters) of an input field.
step
It specifies the legal number intervals for an input field.
value It specifies the default value for an input field.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.