Html forms

Forms are a type of html elements that let you create groups of related info,
then GET/POST to a particular URL.

The form data will be appended to the URL as URL params.

Documentation

official docs	https://www.w3.org/TR/2018/WD-html53-20181018/sec-forms.html#sec-forms
<input> types	https://www.w3schools.com/html/html_form_input_types.asp

Example

<form action="user/login" method="GET">

  <input type="text" 
         name="username"
         placeholder="JohnDoe@gmail.com">

  <input type="password" 
         name="password"
         placeholder="password">

  <input type="submit" value="Log in">
</form>

• The user enters user@example.com and password, then clicks submit.
• The form issues the GET request https://website.com/user/login?username=user@example.com&password=password

Form Params

<form action="?" method="POST">  <!-- form data is posted to current page -->

Forms may use either GET or POST only,
but the method can be overridden with a hidden input type.

<form action="/some/route" method="post">
  <input type="hidden" name="_method" value="patch">  <!-- submit tag will HTTP-PATCH rather than POST -->
</form>

You can also override the URL with submit tag element attributes

<form action="/some/route" method="post">
  <input type="submit" formaction="/some/other/route">

Common Form Elements

input

These are your most common pre-built input fields.
See full list of input types: https://www.w3schools.com/html/html_form_input_types.asp

Example:

<input type="text" name="firstname">

You can use labels to assign visible text to a control.

<!-- 
  -- 'for' allows you to define the label separately from the input 
  -->
<input type="radio" id="red">
<label for="red">RED</label>

<!-- 
  -- you can also define the input inside the label 
  -->
<label>
  Birthday: <input type="date" id="birthday">
</label>

file input-type (file uploads)

Renders a "choose" button that lets you pick a file to upload.

<!-- important to use multipart/formdata for uploaded files -->
<form action="/upload" enctype="multipart/formdata" method="post">
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

select (combobox, selection-list)

Select is a combobox or dropdown-list. The user chooses from a pre-determined list of items.

• selected item is indicated by selected attr
• if select has attr size=X, render list of items
• if select has attr multiple, render a list of items, multiple can be selected

<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi" selected>Audi</option>
</select>

textarea

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

button

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

fieldset/legend

• fieldset creates a border surrounding items
• legend assigns label to that border.

<form action="/action_page.php">
  <fieldset>
    <legend>Name:</legend>
    <input type="text" name="fname" value="John"><br>
    <input type="text" name="lname" value="Doe"><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>