Form in HTML

Form in HTML – II | Web Development

In the previous article, we learned about the basic structure of HTML form and also discovered the input element’s text type.

In this article, we will learn about some more input types of the input element. So that we can use the form properly and make use of the correct input type that is really required in our form and about the label tag.

Some Input types of the Input element are:–

Input typehow to useUse of Attribute
Text<input type=”text”>Creates a simple text input field (for name, address, etc.).
Number<input type=”number”>Creates a feild where user can input a number.
Submit<input type=”submit”>Creates a submit button which is used to submit the form.
Reset<input type=”reset”>Creates a reset button which resets all the form feilds to their default value.
Button<input type=”button”>Creates a simple button.
Checkbox<input type=”checkbox”>Creates a checkbox in which users can select the desired choices.
Radio<input type=”radio”>Creates a radio button in which users can select one of the many options.
Date<input type=”date”>Creates a field in which users can fill the required date (e.g. date of birth).
Datetime-local<input type=”datetime-local”>Creates a field in which users can fill the date and time.
Email<input type=”email”>Creates an input field where users can input an email address.
Tel<input type=”tel”>Creates an input field where users can input a telephone number.
Password<input type=”password”>Creates a password field.
File<input type=”file”>Creates a field where users can upload a file.

Label tag: the label tag is used for the convenience of the users as it helps in increasing the hit area of the section that is smaller and can’t be clicked by the users easily. By using this tag, the text in the input element itself became clickable and toggles the input.

Now let’s take an example of form using these input types and labels:–

In this form, we are using almost every input type just to show you how each input type works.

<!DOCTYPE html>
<html>
<body>
<form action="#">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>

  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>

  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday"><br><br>

  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"><br><br>

  <p>You are:</p>
  <input type="radio" id="student" name="profession" value="student">
  <label for="student">Student</label><br>
  <input type="radio" id="employee" name="profession" value="employee">
  <label for="employee">Employee</label><br>
  <input type="radio" id="freelancer" name="profession" value="freelancer">
  <label for="freelancer">Freelancer</label><br><br>

  <p>Your favorite Web language:</p>
  <input type="checkbox" id="fav_language1" name="fav_language1" value="HTML">
  <label for="fav_language1">HTML</label><br>
  <input type="checkbox" id="fav_language2" name="fav_language2" value="CSS">
  <label for="fav_language2">CSS</label><br>
  <input type="checkbox" id="fav_language3" name="fav_language3" value="JavaScript">
  <label for="fav_language3">JavaSript</label><br><br>

  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor"><br><br>

  <input type="submit" value="Submit">
  <input type="reset">
</form> 
</body>
</html>

Output :



 









You are:

 
   
   

Your favorite Web language:







Hope this article will guide you to recognize all about the HTML form that you needed and still if you have any problems or queries regarding this, please post them in the comments section and we will be glad to assist you.

This Post Has 3 Comments

Leave a Reply