HTML

Last Updated: 10/5/2022

Form Elements

  • Each form element must have a name attribute to be submitted.
  • If the name attribute is omitted, the value of the form element will not be sent at all.
  • Always specify id and name for input, select, textare

<input>

  • Can be displayed in several ways, depending on the type attribute.
<input type="text">
<input type="radio">
<input type="checkbox">

<label>

  • Defines a label for several form elements.
  • When the user clicks the label, it focuses the element associated with it
  • The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.
<label for="fname>First name</label>
<input type="text" id="fname">

<select>

  • Defines a drop-down list
  • <option> elements defines an option for the list.
<select id="fruit" name="fruit">
  <option>Banana</option>
  <option selected>Mango</option>
  <option>Orange</option>
</select>

<textarea>

  • Defines a multi-line input field
  • The rows attribute specifies the visible number of lines in a text area.
  • The cols attribute specifies the visible width of a text area.
<textarea name="message" rows="10" cols="30">
</textarea>

<button>

  • Defines a clickable button
  • Always specify the type attribute for the button element. D
<button type="submit">Submit</button>

<fieldset> and <legend>

  • Used to group related elements in a form.
  • Defines a caption for the <fieldset> element.
<form action="/action_page.php">
  <fieldset>
    <legend>Personal Information:</legend>
    <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"><br><br>
  </fieldset>
  <fieldset>
	  <legend>Login Information:</legend>
	  <label for="username">Username:</label><br>
	  <input type="text" id="username" name="username"><br>
	  <label for="lname">Password:</label><br>
	  <input type="password" id="pwd" name="pwd"><br><br>
</fieldset>	  
</form>

<datalist>

  • Specifies a list of pre-defined options for an <input> element.
  • Users will see a drop-down list of the pre-defined options as they input data.
  • The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>
Previous
Next