Form Input Types
The HTML form element < input type=" " > is very crucial. The input element's "type" attribute can be one of several types, each of which defines an information field. A text box is created by using < input type="text" name="name" >.
The input element has many types. Few types can be seen below:
-
< radio>
This element can be used to select one option among multiple options.
Example
<![CDATA[
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Example of Radio Buttons</h2>
<input type="radio" id="yes" name="choice" value="yes">
<label for="yes">Yes</label><br>
<input type="radio" id="no" name="choice" value="no">
<label for="no">No</label><br>
</form>
</body>
</html>
]]>
OUTPUT
-
< checkbox>
This element can be used to select more than one option among multiple options.
Example
<![CDATA[
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Example of Checkboxes</h2>
<input type="checkbox" id="fruit1" name="fruit1" value="mango">
<label for="fruit1"> I like mango</label><br>
<input type="checkbox" id="fruit2" name="fruit2" value="apple">
<label for="fruit2"> I like apple</label><br>
<input type="checkbox" id="fruit3" name="fruit3" value="banana">
<label for="fruit3"> I like banana</label><br><br>
</form>
</body>
</html>
]]>
OUTPUT
-
< password>
This element is used to define a password field.
Example
<![CDATA[
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Example for Password field</h2>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
</body>
</html>
]]>
OUTPUT
-
< email>
This element is used to define input fields containing an email address.
Example
<![CDATA[
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Example for Email Field</h2>
<label for="email">Enter your email id:</label>
<input type="email" id="email" name="email">
</form>
</body>
</html>
]]>
OUTPUT
-
< date>
This element is used to take a date input from the user.
Example
<![CDATA[
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Example for Date Field</h2>
<label for="dob">Enter your date of birth:</label>
<input type="date" id="dob" name="dob">
</form>
</body>
</html>
]]>
OUTPUT
-
< color>
This element is used to input the color of user’s choice. A color picker will be displayed according to the browser.
Example
<![CDATA[
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Example for Color Picker</h2>
<label for="favcolor">Select your a color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
</form>
</body>
</html>
]]>
OUTPUT
The color mentioned in the code will be displayed by default.
After choosing some other color:
-
< file>
This element can be used to upload a file to the webpage.
Example
<![CDATA[
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Example for File upload</h1>
<label for="myfile">Upload a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
</body>
</html>
]]>
OUTPUT
Before choosing a file:
After choosing a file:
