HTML Form Input

Prev Next

The <input> element in HTML is versatile and supports various type attributes to define different types of input fields. Here's a comprehensive list of input types:

Type Description
text Defines a one-line text input field.
password Defines a one-line password input field, obscuring the entered text.
submit Defines a submit button to submit the form to the server.
reset Defines a reset button to reset all values in the form.
radio Defines a radio button, allowing the selection of only one option.
checkbox Defines checkboxes, allowing the selection of multiple options.
button Defines a simple push button, programmable for various tasks.
file Defines an input to select a file from the device storage.
image Defines a graphical submit button.
color Defines an input field for selecting a color.
date Defines an input field for selecting a date.
datetime-local Defines an input field for entering a date and time without time zone.
email Defines an input field for entering an email address.
month Defines a control for selecting a month and year, without time zone.
number Defines an input field for entering a number.
url Defines a field for entering a URL.
week Defines a field for entering a date with week and year, without time zone.
search Defines a single-line text field for entering a search string.
tel Defines an input field for entering a telephone number.

Example:

<!DOCTYPE html>
<html>
<head>

<title>HTML Form Input Types</title>

</head>
<body>
<h1>HTML Form Input Types Example</h1>
<form action="/submit_form" method="post">

<!-- Text Input -->
<label for="textInput">Text Input:</label>
<input type="text" id="textInput" name="textInput"><br><br>

<!-- Password Input -->
<label for="passwordInput">Password Input:</label>
<input type="password" id="passwordInput" name="passwordInput"><br><br>

<!-- Submit Button -->
<input type="submit" value="Submit"><br><br>

<!-- Reset Button -->
<input type="reset" value="Reset"><br><br>

<!-- Radio Buttons -->
<label>Radio Buttons:</label>
<input type="radio" id="radio1" name="radioGroup" value="option1">
<label for="radio1">Option 1</label>
<input type="radio" id="radio2" name="radioGroup" value="option2">
<label for="radio2">Option 2</label><br><br>

<!-- Checkboxes -->
<label>Checkboxes:</label>
<input type="checkbox" id="checkbox1" name="checkboxGroup" value="check1">
<label for="checkbox1">Check 1</label>
<input type="checkbox" id="checkbox2" name="checkboxGroup" value="check2">
<label for="checkbox2">Check 2</label><br><br>

<!-- Button -->
<input type="button" value="Click Me"><br><br>

<!-- File Input -->
<label for="fileInput">File Input:</label>
<input type="file" id="fileInput" name="fileInput"><br><br>

<!-- Image Input -->
<label for="imageInput">Image Input:</label>
<input type="image" src="submit.png" alt="Submit" width="100" height="50"><br><br>

<!-- Color Picker -->
<label for="colorPicker">Color Picker:</label>
<input type="color" id="colorPicker" name="colorPicker"><br><br>

<!-- Date Input -->
<label for="dateInput">Date Input:</label>
<input type="date" id="dateInput" name="dateInput"><br><br>

<!-- DateTime-Local Input -->
<label for="datetimeInput">DateTime-Local Input:</label>
<input type="datetime-local" id="datetimeInput" name="datetimeInput"><br><br>

<!-- Email Input -->
<label for="emailInput">Email Input:</label>
<input type="email" id="emailInput" name="emailInput"><br><br>

<!-- Month Input -->
<label for="monthInput">Month Input:</label>
<input type="month" id="monthInput" name="monthInput"><br><br>

<!-- Number Input -->
<label for="numberInput">Number Input:</label>
<input type="number" id="numberInput" name="numberInput"><br><br>

<!-- URL Input -->
<label for="urlInput">URL Input:</label>
<input type="url" id="urlInput" name="urlInput"><br><br>

<!-- Week Input -->
<label for="weekInput">Week Input:</label>
<input type="week" id="weekInput" name="weekInput"><br><br>

<!-- Search Input -->
<label for="searchInput">Search Input:</label>
<input type="search" id="searchInput" name="searchInput"><br><br>

<!-- Telephone Input -->
<label for="telInput">Telephone Input:</label>
<input type="tel" id="telInput" name="telInput"><br><br>

<!-- Textarea -->
<label for="textareaInput">Textarea:</label>
<textarea id="textareaInput" name="textareaInput" rows="4" cols="50"></textarea><br><br>

<!-- Select -->
<label for="selectInput">Select Input:</label>
<select id="selectInput" name="selectInput">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select><br><br>

<!-- Optgroup -->
<label for="optgroupInput">Optgroup Input:</label>
<select id="optgroupInput" name="optgroupInput">
<optgroup label="Group 1">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="opt3">Option 3</option>
<option value="opt4">Option 4</option>
</optgroup>
</select><br><br>

<!-- Button -->
<button type="button">Button</button>

</form>
</body>
</html>

Output:













































Prev Next