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

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>

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)

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>

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>

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>

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>

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

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

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

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

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

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

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

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

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”>

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>

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>

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

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>

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>

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>

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

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>

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>

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>

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>

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>

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

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">E-mail:</label> <input type=“email" 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;

Resources w3schools.com