Html That I Didn't Know

Mahadev Deshmukh's photo
Mahadev Deshmukh
·

3 min read

The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

The default HTTP method when submitting form data is GET.

After you submit, notice that, unlike the GET method, the form values is NOT visible in the address bar of the new browser tab. {https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_post}

After you submit, notice that the form values is visible in the address bar of the new browser tab.

{https://www.w3schools.com/action_page.php?fname=John&lname=Doe}

Notes on GET:

  • Appends the form data to the URL, in name/value pairs

  • NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)

  • The length of a URL is limited (2048 characters)

  • Useful for form submissions where a user wants to bookmark the result

  • GET is good for non-secure data, like query strings in Google

Notes on POST:

  • Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)

  • POST has no size limitations, and can be used to send large amounts of data.

  • Form submissions with POST cannot be bookmarked

  • The <select> Element

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Use the size attribute to specify the number of visible values:

Use the multiple attribute to allow the user to select more than one value:

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</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" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

<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>
HTML5