HTML Forms

1 minute read

Published:

This post covers introduction to HTML Forms.

HTML Forms

<form>
  <!-- Form Elements -->
</form>
  • Input Element

    • <input type="text">
      <input type="radio">
      <input type="checkbox">
      <input type="submit">
      <input type="button">
      
  • Text Fields

    • <input type="text"> <!-- single line text -->
          
      <!-- id is used for JavaScript/CSS and name is used in form submission -->
      <input type="text" id="fname" name="fname"><br>
          
      <!-- Bind input with label using id-value with for-value -->
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname"><br>
      
    • <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>
      
<!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> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form> 

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>