HTML forms and input types

Lecture 07

HTML forms and input types

HTML form is used to get user input. The user input is most often sent to a server for processing by using get or post methods. The input from the user is generally sent to a server (Web servers, Mail clients, etc). We use the HTML

HTML Form sample code

The input from the user is generally sent to a server (Web servers, Mail clients, etc). We use the HTML tag element to create forms.

<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 
</body>
</html>

Different Input Types use in Form

Different input types which are used in html form page for different type input data collect from the user.

<html>
<body>
<form>
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
</form>
</body>
</html>

Input Type Password

Login page of any website must contains username and password for login process.

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

Input Type Reset

A reset button that will reset all form values to their default values. if you want to reset or clean the whole values of input type of any form then reset do this work on one click.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

HTML Form for Registration

Following is the example for a simple form of registration.

<!DOCTYPE html>  
<html>  
<head>  
<title>Form in HTML</title>  
</head>  
<body>  
<h2>Registration form</h2>  
<form>  
<fieldset>  
<legend>User personal information</legend>  
<label>Enter your full name</label><br>  
<input type="text" name="name"><br>  
<label>Enter your email</label><br>  
<input type="email" name="email"><br>  
<label>Enter your password</label><br>  
<input type="password" name="pass"><br>  
<label>confirm your password</label><br>  
<input type="password" name="pass"><br>  
<br><label>Enter your gender</label><br>  
<input type="radio" id="gender" name="gender" value="male"/>Male  <br>  
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>    
<input type="radio" id="gender" name="gender" value="others"/>others <br/>   
<input type="submit" value="sign-up">  
</fieldset>  
</form>  
</body>  
</html>

Lecture 07