HTML Forms … because a web session is a dialogue, not a monologue

Forms are the main way to interact with the server

2. Server responds

with page 1

1. Browser requests page 1

3. Surfer fills out the form

fields and hits submit

4. Form data is sent in the

request header

5. Server processes

all that data

The <form> tag <form action="formAction.jsp" method="post">! What's your name? ! <input type="text" id="firstName" />! <br />! <input type="submit" />!</form>!

HTTP Methods GET

POST

PUT

DELETE

HEAD

TRACE

CONNECT

PATCH

OPTIONS

Forms post their data in the PUT request's header

What goes inside the form?

�  textarea ◦  for multiline text

�  select ◦  for dropdown lists and listboxes

�  input ◦  for text fields ◦  for checkboxes ◦  for radio buttons ◦  for file uploads

What else goes in the form?

" datalist – Creates a collection of data

" keygen – Generates an ad-hoc public/private key pair

" output ◦  Displays the results of a calculation

" progress – Shows the progress of a running task

" meter ◦  A measurement within a known range

textarea is for multiline text in forms <textarea> Digg is a social news website. Prior to Digg v4, its cornerstone function consisted of letting people vote stories up or down, called digging and burying, respectively. Digg's popularity prompted the creation of copycat social networking sites with story submission and voting systems </textarea>

select can be listboxes or dropdowns

<select multiple="multiple"> <option>David at the Dentist</option> <option>Chocolate Rain</option> <option>Double Rainbow</option> <option>Numa Numa</option> </select>

<select> <option>David at the Dentist</option> <option>Chocolate Rain</option> <option>Double Rainbow</option> <option>Numa Numa</option> </select>

"   datalist

� Does not appear to the user <label>Your favorite fruit:!<input type="text" name="fruit" list="fruits">!

<datalist id="fruits">! <option value="1">Blackberry</option>!

<option value="2">Blackcurrant</option>! <option value="3">Blueberry</option>! <!-- … -->!

</datalist>!</label>!

"   progress <p>Progress: <progress> <span id="p">0</span>% </progress> </p>!

<script>!

var progressBar = document.getElementById('p');!

function updateProgress(newValue) {!

progressBar.textContent = newValue;!

}!

</script>!

"   meter draws a gauge on the form Your score is: <meter>2 out of 10</meter>!

"   output creates a read-only result of a calculation

<form> <label for="nunchuk">Nunchuk Skillz: </label> <input id="nunchuk" ! type="range"! min="0" max="100"> <output for="nunchuk" ! onforminput = ! "value=nunchuk.valueAsNumber">! 0! </output> </form> !

inputs are for everything else

�  text � password �  checkbox �  radio �  file �  submit � button � hidden

"   email " url "   number "   range "   date " datetime " datetime-local "   month "   week "   time "   search "   color

The simple input types

�  text – for text (duh) � password – text, but the characters are not

typed back to the screen �  checkbox – has a boolean selected value �  radio – a radio button – like a checkbox

except that only one can be selected at a time �  submit – the button that submits the form

"   Requiring values

� Add required="required" to any form element <input id="email" type="email" required="required" />

demo: required form fields Hands-on required form fields

input type="file"

Allows the user to point to a file, usually for upload to the server

input type="button"

� A button that does nothing � You have to wire it up using JavaScript

input type="hidden"

The user never sees it, nor changes it Used to pass values between pages

"   input type="email"

� A text field, but only accepts values that look like email addresses

�  Show success and failed inputs

"   input type="url"

Same as email but with URLs

demo: email and url Hands-on email and url

"   <input type="date">

Other time-types

" time – the time of day only " datetime – a date and time combination

normalized around UTC (GMT) " datetime-local – same, but using the local

timezone " month – same as date but only month and year " week – a week number and year

"   input type="search"

� Looks nearly identical to text � More of a semantic difference

"   input type="color"

� A color picker � Returns a hex RGB number

demo: search and color Hands-on search and color

Whew! That's a lot of inputs

Conclusion

�  Forms are used to collect data from the user and then send them to the server for processing

� There are a few fields like textarea, select, datalist, keygen

� And there are lots on input fields with types of text, submit, search, time, color, number, range, url, and email

Further study