HTML/Training/Basic form

From W3C Wiki
< HTML‎ | Training
Revision as of 22:37, 21 July 2011 by Plehegar (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Form controls

<form>
<table>
  <tr>
    <td>First name</td>
    <td><input type="text" id="fn"></td>
  </tr>
  <tr>
    <td>Last name</td>
    <td><input type="text" id="ln"></td>
  </tr>
  <tr>
    <td>Gender</td>
    <td>
      <input type="radio" id="m" name="gender">male<br/>
      <input type="radio" id="f" name="gender">female
    </td>
  </tr>
  <tr>
    <td>Phone number</td>
    <td><input type="tel" id="tel"></td>
  </tr>
  <tr>
    <td>E-mail</td>
    <td><input type="email" id="email"></td>
  </tr>
  <tr>
    <td>Kind of contact</td>
    <td>
      <select>
        <option value="ir">Interview Request</option>
        <option value="mq">Membership Questions</option>
        <option value="ilq">International Liaison Questions</option>
        <option value="tq">Technology Questions</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Comment</td>
    <td><textarea></textarea></td>
  </tr>
</table>
</form>


The Input element

The <input> element represents a typed data field, usually with a form control to allow the user to edit the data.

  • The data type of the input elements are specified by the type attribute.
    The following examples are typical kinds of the type attribute.

type="text"

The text state represents a one line plain text edit control for the element's value:

  • Name
  • User ID

... etc

 Account: <input type="text"><br> PIN: <input type="text">

Input text01.png

See also text state.


type="radio"

The radio button state represents a type attribute whose value is "radio" represents a selection of one item from a list of items:

  • male or female
  • single or married

... etc

The radio button groups are specified by the name attribute. The items that belong to the same radio group should have the same value of the name attribute.

 <input type="radio" name="gender" value="m">male<br> <input type="radio" name="gender" value="f">female

Input radio01.png

See also radio state.


type="tel"

The telephone state represents a control for editing a telephone number given in the element's value.

 Phone: <input type="tel">

Input tel01.png

See also telephone state.


type="email"

The E-mail state represents a control for editing a list of e-mail addresses given in the element's value.

 Cc: <input type="email">

Input email01.png

See also E-mail state.


The textarea element

The <textarea> element represents a multiline plain text edit control for the element's raw value.

  • The cols attribute specifies the expected maximum number of characters per line. by defult, it is 20.
  • The rows attribute specifies the number of lines to show. by defult, it is 2.
 <textarea cols="80" rows="5"></textarea>

Textarea01.png

See also The textarea element.


Select menu

The select menu is specified by <select> and <option>.

The select element

The <select> element represents a control for selecting amongst a set of options.

  • The list of options for a select element consists of all the option element children of the select element.

See also The select element

The option element

The <option> element represents an option in a select element.

 <select>
   <option>Boston</option>
   <option>New York</option>
 </select>

Option01.png

See also The option element


Challenge

try it

1. Let's make a recruit application form.

[recruit.html]

<h2>Recruit</h2>
<h3>Apprications</h3>
<form action="http://www.example.com/form.cgi" method="get">
<table>
  <tr>
    <th>First Name</th>
    <td><input type="text"></td>
  </tr>
  <tr>
    <th>Last Name</th>
    <td><input type="text"></td>
  </tr>
  <tr>
    <th>E-mail</th>
    <td><input type="email"></td>
  </tr>
  <tr>
    <th>Job Categories</th>
    <td>
      <input type="checkbox" name="job" value="barista">barista<br>
      <input type="checkbox" name="job" value="waiter">waiter
    </td>
  </tr>
  <tr>
    <th>Comment</th>
    <td><textarea></textarea></td>
  </tr>
</table>
</form>

2. Check your Web browser.

Form chall01.png


The element introduces here is not all. Let's see also Forms.


In the next week, you will learn the sections elements. "Sections"