HTML Input Types

In HTML <input type=” “> is an important element of HTML form. The “type” attribute of input element can be various types, which defines information field. Such as <input type=”text” name=”name”> gives a text box.

Following is a list of all types of <input> element of HTML.

type=” “Description
textDefines a one-line text input field
passwordDefines a one-line password input field
submitDefines a submit button to submit the form to server
resetDefines a reset button to reset all values in the form.
radioDefines a radio button which allows select one option.
checkboxDefines checkboxes which allow select multiple options form.
buttonDefines a simple push button, which can be programmed to perform a task on an event.
fileDefines to select the file from device storage.
imageDefines a graphical submit button.

HTML Input Type Text

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

Example

<!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

First name:  Last name:  

HTML Input Type Password

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

Example

<!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

User name:  User password: 

HTML 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

Example

<!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

First name:  Last name:  

HTML 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.

Example

<!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

First name:  Last name:   

HTML 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 the same value, then only a distinct value will get selected. The Radio buttons let a user select ONLY ONE of a limited number of choices.

Example

<!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

 Male
 Female
 Other


HTML Input Type Checkbox

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

Example

<!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

Samsung Google Pixel


HTML Input Type Button

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

Example

<!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 Input Type Number

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

Example

<!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

Quantity (between 1 and 10):  

HTML Form Input Restrictions

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

Attribute
New
Description
disabledIt specifies to disabled the input field.
max
It specifies maximum value for an input field.
maxlengthIt 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.
readonlyIt specifies that an input field is read only that cannot be changed.
required
It specifies that an input field is require.
sizeIt specifies the width (in characters) of an input field.
step
It specifies the legal number intervals for an input field.
valueIt specifies the default value for an input field.

Leave a Comment

Your email address will not be published.