More on HTML Forms

Label for radio button and checkbox text

Pick your favourite colour. You may want to click on the name of the colour, but you have to click on the little round button. Which one is it?
My favourite colour is: Red Green Blue
Now, in the next line, you can click on the colour name:
My favourite colour is:
The second line is coded like this: 
<input type="radio" name="colour2" id="r" value="red" />
	<label for="r"> Red</label>
<input type="radio" name="colour2" id="g" value="green" />
	<label for="g"> Green</label>
<input type="radio" name="colour2" id="b" value="blue">
	<label for="b"> Blue</label>
Any tag can have an ID, which must be unique on the page. (Of course you wouldn't want to put in the confusing extra button.)

Combo Box

You may be familiar with a combo box from other applications. This would be a combination of Select and Input type=text. The bad news is, there ain't no combo box in HTML. The good news is you could "fake it" using JavaScript (when the select changes, the chosen value is copied into the "real" input), here is a simple example:
My favourite sport is or type other:
To see how this is coded, please "view source" of this page. You should know how to do this by now.

HTML 5 - new features

HTML 5 defines a number of new INPUT types. These are gradually being implemented in various browsers. Meanwhile, bear in mind that any unrecognized type defaults to "text". In addition, a text field can have a datalist attached. In the following example, sport works like the "combo box" above in Chrome, but not in Firefox, as of February 2015. Look at it in other browsers to determine current status.

My favourite sport is   Has a datalist of common sports
My Birthday is:           (New type="date") or Enter as 2014-12-25
How many planets?   (type="number" max="15")

Here is the code for this example:

<form class="ex" action="/jensen/echo.php"> 
My favourite sport is 
  <datalist id="common sports">
   <option>Football</option>
   <option value="Hockey"> </option>
   <option>Mountain Climbing</option>
  </datalist> 
<input name="sport" list="common sports">
 My Birthday is: 
<input name="birthday" type="date">
      (New type="date") or Enter as 2014-12-25<br>
 How many planets?
<input type="number" name="planets" max="15">
	(type="number" max="15")
<input type="submit"> <input type="reset"> </form>

Meanwhile: required, placeholder

You can now specify that a field (input or textarea) is required (not blank), and to give a hint, specify a placeholder, rather than an initial value. The placeholder is shown in grey, and disappears when you start entering..
title customizes the error message. 


<form class="ex" action="/jensen/echo.php"> 
    <textarea name="commments" 
     placeholder="please make some remark" required
 title="Spare me 2 words!"></textarea>
	<input type="submit"> <input type="reset"> 
</form>

 Other new types:

Back to Contents
Home page of Lin Jensen