Creating Form Elements

1. Creating Form Elements Introduction Text-input Boxes Buttons Text Areas Checkbox Radio Button Pulldown and Scrolling Menu List

2. Introduction • Form makes a document interactive by collecting and processing user input and formulating a personalized replies. • Two Steps for creating a form • Create <form> and </form> tag • Create form controls within form tag <form action=“ ” method=“post/get” >…</form> Address of the application that is to receive and process form’s data The method by which the data is to be sent to the server

3. Text-input boxes • Conventional text fields <input type=“text” size=“ ” maxlength=“ ” name=“” value=“ ”> • Masked text fields <input type=“password” size=“ ” name=“ ”> • Hidden text fields <input type=“hidden” size=“ ” name=“ ”>

4. Buttons • Push buttons <input type=“button” value=“ ” name=“ ”> • Submission buttons <input type=“submit” value=“ ” name=“ ”> • Reset Buttons <input type=“reset” value=“ ” name=“ ”>

5. Text Areas • Creates a multiline text-input area • Usage: <textarea rows=“ ” cols=“” name=“ ”> ……… </textarea>

6. Checkboxes <input type=“checkbox” name=“ ” value=“ ”> • Tells the browser to create a checkbox • Use it when you want the user to select more than one choice • Used to store the value • Also, use the same name for a group checkbox choices Important for JavaScript (Will not show up on the screen)

7. Radio Buttons <input type=“radio” name=“ ” value=“ ”> Important for JavaScript (Will not show up on the screen) • Tells the browser to create a radio button • Use it when you want the user to select only one choice in a group • Used to store the value • Also, used to group related choices

8. Pulldown menu list: <select name=“ ”> <option> … <option> … . . . <option> … </select> Scrolling menu list: <select name=“ ” size=“ ”> <option> … <option> … . . . <option> … </select> Pulldown and Scrolling Menu list