Warning:
This wiki has been archived and is now read-only.

Educational materials/Basic form

From HTML Wiki
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

 First name: <input type="text">

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
<input type="radio" name="gender" value="f">female

See also radio state.

type="tel"

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

 Phone number; <input type="tel">

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.

 E-mail: <input type="email">

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>

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>option 1</option>
   <option>option 2</option>
   <option>option 3</option>
   <option>option 4</option>
 </select>

See also The option element


Challenge

try it

1. Let's make a recruit application form.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Recruit | W3C cafe</title>
  <meta name="description" content="The W3C cafe is .....">
  <meta name="keywords" content="W3C cafe, coffee, .....">
</head>
<body>
  <h1>Recruit Informations</h1>
  <h2>Apprications</h2>
  <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>
</body>
</html>

2. Check your Web browser.

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