❐HTML❐

❐wD Learn

HTML

HTML Introduction

HTML Element

HTML Attributes

HTML Heading

HTML Paragraph

HTML Style

HTML Format

HTML Color

HTML Link

HTML Image

HTML Table

HTML List

HTML Symbols

HTML Emojis

HTML Forms

HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Example




The <form> Element The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
HTML Input Types Here are the different input types you can use in HTML:
  • <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">
Input Type Text <input type="text"> defines a single-line text input field:

Example


<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Here is the output:



Input Type Submit <input type="submit"> defines a button for submitting form data to a form-handler.

Example


<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>
Here is the output:





Input Type Reset <input type="reset"> defines a reset button that will reset all form values to their default values:

Example


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

<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Here is the output:







Input Type Radio <input type="radio"> defines a radio button.

Example


<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Here is the output:
 
Choose your favorite Web language:




Input Type Checkbox <input type="checkbox"> defines a checkbox.

Example


<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Here is the output:


Input Type Button <input type="button"> defines a button.

Example


<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Here is the output: