Press → key to advance. Zoom in/out: Ctrl or Command + +/-.

HTML: Forms


Forms: Browser-to-Server Communication

The Form HTML

<form action="http://imagine-it.org/processform.php" 
  method="get">
  <input type="text" name="first">
  <input type="text" name="last">
  <button type="submit">Send Data</button>
</form>


The Form HTTP Request: GET

Request:

GET /processform.php?first=Pamela&last=Fox HTTP/1.1
Host: imagine-it.org

Response:

200
<doctype html>
<html>
  <head>
    <title>Welcome to my website!</title>
    …
</html>

Form element

<form action="http://imagine-it.org/processform.php" 
  method="get">
</form>

<form action="http://imagine-it.org/processform.php" 
  method="post">
</form>

The Form HTTP Request: POST

Request:

POST /processform.php HTTP/1.1
Host: imagine-it.org
first=Pamela&last=Fox

Response:

200
<doctype html>
<html>
  <head>
    <title>Welcome to my website!</title>
    …
</html>

Input element

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

<input type="text" name="animal" value="Fox">

Button element

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

<button type="reset">Start over</button>

<button type="button">Customize</button>

Label element

<label> Animal:
<input type="text" name="animal">
</label>
Or
<label for="animal"> Animal: </label>
<input type="text" name="animal" id="animal">

Checkboxes

Yes/No questions: 
<label> Extra cheese?
<input type="checkbox" name="cheese"/>
</label>

Multiple options: 
Pizza Toppings:
<input type="checkbox" name="bacon" id="bacon">
<label for="bacon">Bacon</label>
<input type="checkbox" name="cheese" id="cheese">
<label for="cheese">Extra Cheese</label>
Pizza Toppings:

Radio buttons

Multiple choice: 
<fieldset>
  <legend>Pizza Size:</legend>
  <label for="small">Small</label>
  <input type="radio" name="size" id="small" value="small">
  <label for="medium">Medium</label>
  <input type="radio" name="size" id="medium" value="medium">
  <label for="large">Large</label>
  <input type="radio" name="size" id="large" value="large">
</fieldset>
Pizza Size:

The select element

<label for="crust">Crust type:</label>
<select name="crust" id="crust">
  <option value="thin">Thin</option>
  <option value="thick">Thick</option>
  <option value="cheese">Cheese</option>
</select>

Textarea element

<label>Delivery instructions: <br>
<textarea name="delivery"></textarea>
</label>

<label>Write a haiku on your love for pizza: <br>
<textarea name="haiku" rows="3" cols="40"></textarea>
</label>

Forms in HTML5

<input type="email" placeholder="bla@email.com">


<input type="range" min="0" max="50" value="10">


<input type="color">


<input type="date" min="2010-08-14" max="2011-08-14">

caniuse.com

Exercise Time!