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

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=“ ” enctype=“ ”>…</form> Address of the application that is to receive and process form’s data Standard encoding format (application/x-www-form-urlencoded ), text/plain, multipart/form-data POST/GET

Text-input boxes Conventional text fields Masked 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=“ ”>

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

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

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)

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

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