learn2kode.in

Menu

HTML Tutorial

Menu

HTML Forms

HTML forms are used to collect user input. The <form> element wraps all input fields.

Basic Form Structure

Copy Text 
<form action="submit.php" method="post">
  <label>Name:</label>
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

Key Attributes of

Attribute Meaning
action URL where form data is sent
method HTTP method (GET or POST)
target Where to open the response
autocomplete Enables/disables autofill

Form Input Types

HTML forms are used to collect user input. The <form> element wraps all input fields.

Input Type Description
text Single-line text input
email Email validation
password Password masked
number Numeric input
date Date picker
checkbox Multiple selection
radio Single selection
file Upload file
submit Submit button

Example: Common Form Fields

Copy Text 
<form action="submit.php" method="post">

  <label>Full Name:</label>
  <input type="text" name="fullname"><br><br>

  <label>Email:</label>
  <input type="email" name="email"><br><br>

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

  <label>Select Gender:</label><br>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br><br>

  <label>Skills:</label><br>
  <input type="checkbox" name="html"> HTML
  <input type="checkbox" name="css"> CSS
  <input type="checkbox" name="js"> JavaScript<br><br>

  <label>Upload Resume:</label>
  <input type="file" name="resume"><br><br>

  <button type="submit">Submit</button>

</form>

Output








Male
Female


HTML CSS JavaScript



Form Labels

The <label> tag improves accessibility & usability.

Copy Text 
<label for="name">Name:</label>
<input type="text" id="name">

Output

Textarea

Used for multiple-line text input.

Copy Text 
<textarea rows="4" cols="40">Enter message...</textarea>

Output

Dropdown (Select Box)

Copy Text 
<select name="country">
  <option value="india">India</option>
  <option value="usa">USA</option>
  <option value="uk">UK</option>
</select>

Output

Form Buttons

Copy Text 
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click Me</button>

Output

GET vs POST

Method Usage Sends Data In
GET Retrieve data URL
POST Submit sensitive data Request body

Example

Copy Text 
<form action="login.php" method="post">

Required Fields

Copy Text 
<input type="email" name="email" required>

Output

Placeholder Text

Copy Text 
<input type="text" placeholder="Enter your name">

Output

HTML Form Attributes