A Guide to the new HTML 5 Form Input Types
Abstract
HTML (Hypertext Markup Language) has many tags, attributes to use for developing a webpage’s. In that, Web forms are one of the important parts of webpage’s. This article will be all about HTML input types like text boxes, password fields, check boxes, dropdown lists, file uploads, date selections and submit buttons. Let's Proceed further with a smile!
Scope
This article will include HTML input types for HTML 5 forms. We will look into that and make some web-based HTML forms. The main aim of this article is to get familiar with HTML 5 form input types. Some types are Text, Email, Submit Button, Password etc.
Introduction to HTML 5 form Input Types
HTML 5 form input types are represented using input element <input type = “ ”> which is a very important element of HTML form. The type attribute in the input element can be many types, which defines the input box. Now let’s know some input types.
Some input types are Text, Password, Email, File uploads, Date, Checkboxes, Radio and Submit Buttons, URL, Dropdown lists etc.
Now let’s see some types,
Text type:
Text is one of the input types which are used to take input as 1-line text.
Let’s see with some practical example:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Text Input Type</title>
</head>
<body>
<form>
<label>Name</label>
<Input type="text"></Input>
</form>
</body>
</html>
Output:
Similarly, if we use type= “email” it expects ‘@’ because emails should have @ for sure.
It accepts if we write properly like
Password type:
Password is one of the input types which are used to take input as 1-line password and text we write will be invisible.
Let’s see with some practical example:
Code:
<form>
<label>Name</label>
<Input type="password"></Input>
</form>
Output:
Radio Buttons:
Radio button is one of the input types which are used to allow selecting an option from multiple options. Generally, used in MCQ’s.
Let’s see with some practical example:
Code:
<form>
<label>Gender<br></label>
<input type="radio" name="gender">
<label>Male</label><br>
<input type="radio" name="gender">
<label>Female</label><br>
</form>
Output:
Similarly, we can use checkbox like type= “checkbox” and output be like
Submit Buttons:
These are used to submit any form to a server like it can be used in Login Pages, Registration Pages..
Code:
<form>
<h2>Login Page</h2>
<label>Enter your Email </label>
<Input type="email"><br /></Input>
<label>Enter Password </label>
<Input type="password"><br /></Input>
<Input type="submit" value="Login"></Input>
</form>
Output:
File Uploads:
This type is used to upload any files while filling any forms i.e., for applying for any Jobs, Internships they usually ask to submit a resume that is done using this file input type.
Code:
<form>
<h2>Registration Page</h2>
<label>Enter your Email </label>
<Input type="email"><br /></Input>
<label>Enter Password </label>
<Input type="password"><br /></Input>
<label>Enter Confirm Password </label>
<Input type="password"><br /></Input>
<label>Upload Resume</label>
<Input type="file"><br /></Input>
<Input type="submit" value="SignUp"></Input>
</form>
Output:
Conclusion
Now, we are at the end of the article, here we learnt some input types used in HTML forms, Firstly know what is input element and then listed all the input types in HTML. Hope you like the blog!
To Learn more about HTML input types and forms visit Scaler Topics
Author Bio: Vaishnavi Yada from GNITS, Hyderabad currently pursing engineering 3rd year specialization with Computer Science and Engineering. I am passionate to write technical blogs with expertise in HTML, CSS, Python, JS(beginner), C etc, also I write some blogs in Medium.
