InternetingIsHard Part 8 – HTML Forms

Part 8 of Internetting is Hard, this time regarding HTML forms.

 

Form

There’s the backend, which concerns the code that processes and store the data, but we won’t be going through it today. A form can be created with the <form> element, with action=’url-of-server’.

There are two commonly used methods, ‘post’ and ‘get’. You can look at the rest here. ‘Post’ sends data to the database and ‘get’ requests data from the database.

 

Input

To collect input, use the <input> element:

Text

<div class='form-row'>
  <label for='full-name'>Name</label>
  <input id='full-name' name='full-name' type='text'/>
</div>

The <div> is for styling purposes, and <label> is a semantic HTML element like <article> or <figcaption> but for forms labels.

 

 

Notice that ‘full-name’ id ties the input field to the label.

You can apply CSS to forms.  [type=’text’] only selects input that are ‘text’ type (ignoring for eg, radio buttons). Read more here.

.form-row input[type='text']

 

You can read up about the different input types here.

.form-row input[type='text']:invalid

You can use the :valid or :invalid, or :focus pseudoclass to style form inputs with CSS.

Email

<div class='form-row'>
  <label for='email'>Email</label>
  <input id='email'
         name='email'
         type='email'
         placeholder='joe@example.com'/>
</div>

Radio Buttons

Radio buttons exist inside a fieldset that group each button, and only allow one button to be selected from the fieldset.

<fieldset class='legacy-form-row'>
  <legend>Type of Talk</legend>
  <input id='talk-type-1'
         name='talk-type'
         type='radio'
         value='main-stage' />
  <label for='talk-type-1' class='radio-label'>Main Stage</label>
  <input id='talk-type-2'
         name='talk-type'
         type='radio'
         value='workshop'
         checked />
  <label for='talk-type-2' class='radio-label'>Workshop</label>
</fieldset>

Fieldsets do not support flexbox so we use the class ‘legacy-form-row’ to style it as a float in CSS.

Dropdown

<div class='form-row'>
  <label for='t-shirt'>T-Shirt Size</label>
  <select id='t-shirt' name='t-shirt'>
    <option value='xs'>Extra Small</option>
    <option value='s'>Small</option>
    <option value='m'>Medium</option>
    <option value='l'>Large</option>
  </select>
</div>

Styling dropdown menu is also hard. You can use a hack to style it:

.form-row select {
  width: 100%;
  padding: 5px;
  font-size: 14px;            /* This won't work in Chrome or Safari */
  -webkit-appearance: none;   /* This will make it work */
}

Textarea

<div class='form-row'>
  <label for='abstract'>Abstract</label>
  <textarea id='abstract' name='abstract'></textarea>
  <div class='instructions'>Describe your talk in 500 words or less</div>
</div>

For the CSS, by default, many browsers let users resize the textarea. To fix the size, add:

  resize: none;

Submit button

<div class='form-row'>
  <button>Submit</button>
</div>