HTML Form. Kanida Sinmai

Transcription

1 HTML Form Kanida Sinmai

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

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: TypeDescription 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 />

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

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

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

8 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">

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

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

11 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">

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

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

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

15 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">

16 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">

17 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">

18 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">

19 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">

20 Resources w3schools.com

21 Practical Please see practical #5 on my website