1. Kanida Sinmai ksinmai@tsu.ac.th http://mis.csit.sci.tsu.ac.th/kanida
HTML Form
Kanida Sinmai

2. HTML Form HTML forms are used to collect user input.
The <form> element defines an HTML form:
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.
<form> .
form elements
</form>

3. The <input> Element
The <input> element is the most important form element.
The <input> element has many variations, depending on the type attribute.
Here are the types used in this chapter:
Type Description
text Defines normal text input
radio Defines radio button input (for selecting one of many choices)
submit Defines a submit button (for submitting the form)

4. Input Type: text
<input type="text"> defines a one-line input field for text input:
<form>
  First name:<br />
  <input type="text" name="firstname” />
  <br />
  Last name:<br />
  <input type="text" name="lastname” />
</form>

5. Input Type: radio
<input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices:
<form>
  <input type="radio" name="sex" value="male" checked>Male
  <br />
  <input type="radio" name="sex" value="female">Female
</form>

6. Input Type: checkbox
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<br />
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>

7. Input Type: password
<input type="password"> defines a password field:
<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>

8. Input Type: email <input type=“email"> defines a email field:
<input type=“ " name=“ ">

9. Input Type: date <input type=“date"> defines a date field:
Birthday: <input type=“date" name=“date">

10. Input Type: month <input type=“month"> defines a month field:
Month : <input type=“month" name=“mm">

11. Input Type: week <input type=“week"> defines a week field:
Week of the year : <input type=“week" name=“week">

12. Input Type: datetime-local
<input type=“datetime-local"> defines a datetime field:
Birthday: <input type=“datetime-local" name=“date">

13. Input Type: time <input type=“time"> defines a time field:
Birthday: <input type=“time" name=“time">

14. Input Type: file <input type=“file"> defines a file field:
Upload File: <input type=“file" name=“file">

15. Input Type: color <input type=“color"> defines a color field:
Pick a Color: <input type=“color" name=“color">

16. Input Type: range <input type=“range"> defines a range field:
Rate your feeling 0-10 :
<input type=“range" name=“range“ min=“0” max=“10” step = “1”>

17. Input type: submit
<input type="submit"> defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

18. The <select> Element (Drop-Down List)
The <select> element defines a drop-down list:
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

19. Input Type: button <input type="button"> defines a button:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

20. Input Type: number
The <input type="number"> is used for input fields that should contain a numeric value.
You can set restrictions on the numbers.
Depending on browser support, the restrictions can apply to the input field.
<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

21. The <option> elements
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>

22. The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

23. The <button> Element
The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

24. HTML Input Attributes The value Attribute
The value attribute specifies the initial value for an input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

25. The readonly Attribute
The readonly attribute specifies that the input field is read only (cannot be changed):
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

26. The disabled Attribute
The disabled attribute specifies that the input field is disabled.
A disabled element is un-usable and un-clickable.
Disabled elements will not be submitted.
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

27. The size Attribute
The size attribute specifies the size (in characters) for the input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

28. The maxlength Attribute
The maxlength attribute specifies the maximum allowed length for the input field:
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

29. Fieldset <form> <fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
<input type=“ "><br>
Date of birth: <input type=“date">
</fieldset>
</form>

30. FORM & CSS fieldset { padding: 1em; font:80%/1 sans-serif; } label {
<legend>Subscription info</legend>
<label for="name">Username:</label>
<input type="text" name="name" id="name" />
<br />
<label for="mail"> </label>
<input type=“ " name="mail" id="mail" />
<label for="address">Address:</label>
<input type="text" name="address" id="address" size="40" />
<input type=“submit” value = “Okay” />
</fieldset>
fieldset {
padding: 1em;
font:80%/1 sans-serif; }
label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;

31. Resources
w3schools.com