HTML Form Element

« Prev Next »

<form> is the element used to get user input. It can include text fields, checkboxes, radio buttons, submit buttons, and more.

They are needed for functions like login, registration, search, feedback, etc.

<form action="server_endpoint" method="post">
  <!-- Form elements go here -->
</form>

html-form-element

Attributes of <form>

Attribute Description
action Specifies where to send the form data (URL or file)
method HTTP method: get (visible in URL) or post (hidden)
target Where to display the response (_self, _blank, etc.)
autocomplete Enables/disables autocomplete (on or off)
enctype Encoding type for form data (used with post)

Important Form Input Elements

Text Input

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

Password Field

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

Radio Buttons

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

Checkboxes

<label><input type="checkbox" name="hobby" value="reading"> Reading</label>
<label><input type="checkbox" name="hobby" value="sports"> Sports</label>

Dropdown List

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="india">India</option>
  <option value="usa">USA</option>
</select>

Textarea

<label for="msg">Message:</label>
<textarea id="msg" name="message" rows="4" cols="50"></textarea>

Submit Button

<input type="submit" value="Submit">

Example

<form action="/submit.php" method="post">
  <label for="uname">Username:</label><br>
  <input type="text" id="uname" name="uname"><br><br>

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

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

  <label for="hobby">Hobbies:</label><br>
  <input type="checkbox" name="hobby" value="reading"> Reading
  <input type="checkbox" name="hobby" value="coding"> Coding<br><br>

  <label for="country">Country:</label><br>
  <select id="country" name="country">
    <option value="india">India</option>
    <option value="usa">USA</option>
  </select><br><br>

  <label for="msg">Message:</label><br>
  <textarea id="msg" name="msg" rows="4" cols="40"></textarea><br><br>

  <input type="submit" value="Submit">
</form>
Run ›
notepad
  • Use <label> for accessibility and screen readers.
  • Use name attributes — they are necessary for the server to identify the data.
  • For secure submissions (passwords), always use method="post".
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.