Form Basics

Summary of:
https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-form-basics

The form element

• A container element (=div)
• Wraps all of the inputs a user will interact with on a form.
• 2 essential attributes
  • action : takes a URL value where it should send its data to (backend)
  • method : tells the browser which HTTP request method it should use
    - GET: retrieve something from a server
    - POST: change something on the server
    
    
    
    

Label

<form action="example.com/path" method="post">
  <label for="first_name">First Name:</label>
  <input type="text" id="first_name">
</form>

We give our inputs a label to inform users what type of data they are expected to enter.

The input we want to associate with a label needs an id attribute with the same value as the label’s for attribute.

Placeholder

<label for="first_name">First Name:</label>
<input type="text" id="first_name" placeholder="Bob...">

Use placeholder text to demonstrate how text should be entered and formatted.

Name

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

The name attribute serves as a reference to the data inputted into a form control after submitting it. You can think of it as a variable name for the input. Form input should always have a name attribute; otherwise, it will be ignored when the form is submitted.

"form": {
    "age": "33",
    "first_name": "John",
    "last_name": "Doe"
  },

Try changing the name attributes of some of the input fields in the form and removing the attribute entirely, then submit the form again to see how the form data in the response changes.

Type

<label for="user_email">Email Address:</label>
<input type="email" id="user_email" name="email" placeholder="you@example.com">

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

<label for="amount">Amount:</label>
<input type="number" id="amount" name="amount">

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

email inputs : different keyboard with @ symbol on mobile devices / validation of a correctly formatted email address

password inputs : secured display

number input : only accepts number values

date input : renders a simple date picker calendar

Textarea

<textarea>Some initial content</textarea>
<textarea rows="20" cols="60"></textarea>

An input box that can accept text (ex: comments, reviews)

Select

select dropdown

<select name="fashion">
  <optgroup label="Clothing">
    <option value="t_shirt">T-Shirts</option>
    <option value="sweater">Sweaters</option>
    <option value="coats">Coats</option>
  </optgroup>
  <optgroup label="Foot Wear">
    <option value="sneakers">Sneakers</option>
    <option value="boots">Boots</option>
    <option value="sandals">Sandals</option>
  </optgroup>
</select>

value will be sent to the server when the form is submitted.

Radio

for 5 or fewer options

<h1>Ticket Type</h1>
<div>
  <input type="radio" id="child" name="ticket_type" value="child">
  <label for="child">Child</label>
</div>

<div>
  <input type="radio" id="adult" name="ticket_type" value="adult" checked>
  <label for="adult">Adult</label>
</div>

<div>
  <input type="radio" id="senior" name="ticket_type" value="senior">
  <label for="senior">Senior</label>
</div>

We can set the default selected radio button by adding the checked attribute to it

Checkbox

multiple options

<h1>Pizza Toppings</h1>

<div>
  <input type="checkbox" id="sausage" name="topping" value="sausage">
  <label for="sausage">Sausage</label>
</div>

<div>
  <input type="checkbox" id="onions" name="topping" value="onions">
  <label for="onions">Onions</label>
</div>

<div>
  <input type="checkbox" id="pepperoni" name="topping" value="pepperoni" checked>
  <label for="pepperoni">Pepperoni</label>
</div>

<div>
  <input type="checkbox" id="mushrooms" name="topping" value="mushrooms">
  <label for="mushrooms">Mushrooms</label>
</div>

Button

<button type="submit">Submit</button>

<button type="reset">Reset</button>
<!-- clears all data in the form -->

<button type="button">Click to Toggle</button>
<!-- generic button -->

Note: It is important to remember that a button within a form with the type value of submit (which happens to be the default value) will always try to make a new request and submit data back to the server. Hence, for buttons that are used within a form for different purposes other than submitting the data, the type attribute should always be specified to avoid unwanted effects of submitting a form.

Organizing form elements

Fieldset

a container for a group of related form inputs

<fieldset>
  <label for="first_name">First Name</label>
  <input type="text" id="first_name" name="first_name">

  <label for="last_name">Last Name</label>
  <input type="text" id="last_name" name="last_name">
</fieldset>

Legend

a heading or caption for a inputs’ group

<fieldset>
<legend>Contact Details</legend>

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

<label for="phone_number">Phone Number:</label>
<input type="tel" id="phone_number" name="phone_number">

<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>

<fieldset>
<legend>Delivery Details</legend>

<label for="street_address">Street Address:</label>
<input type="text" id="street_address" name="street_address">

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

<label for="zip_code">Zip Code:</label>
<input type="text" id="zip_code" name="zip_code">
</fieldset>