>> Introduction to HTML: Forms

Web-Based Systems - Misbhauddin Recall HTML Tags Text-based Tags Structure-based Tags Media-based Tags Hyperlinks List Tags Tables Web-Based Systems - Misbhauddin

HTML Forms Can be used for variety of different purposes in your website Sign-Up/Login Comment Area Guestbook Contact Form Questionnaires Polls / Surveys Needs JavaScript or PHP to function properly For later

Creating a Form Use the <form> tag Important attributes of this tag id – Unique identifier of the form (to be used in the JS/PHP to refer to a particular form) name – Name of the form action – URL of the function that will process the form (will see this later in the course) method - {GET|POST} (will see this later in the course)

Fields of a Form Label Form Input Field

Label Labels provide captions or headings for form controls/elements Add labels using the <label> tag Attribute for refers to the name of the input element Allow users to click on the <label> element to bring focus to the proper form control <label for=“password”>Password</label>

Form Input Elements Text Fields and Text Areas Multiple Choice Elements Form Buttons Other Inputs Hidden Inputs File Inputs Field Sets Legend

Web-based Systems | Misbhauddin FORM INPUT ELEMENTS TEXT FIELDS Web-based Systems | Misbhauddin

Input Element <input> tag It is a void element (self-closing) It has an attribute “type” which differentiates between different types of input elements Originally there were only two text field elements Text Password HTML 5 added many new input types

Textbox - Form <input> tag with type=“text” name – assigns a name to the field (to be used in JS/PHP) maxlength – the maximum length of the text box area <form> <label for=“fname">Name</label> <input type="text" name=“fname"/> </form> Name

Password - Form <input> tag with type=“password” name – assigns a name to the field (to be used in JS/PHP) maxlength – the maximum length of the text box area <form> <label for=“pwd">Password</label> <input type=“password" name=“pwd"/> </form> Password

HTML5 Forms New Input Types 13 New Input Types tel search url email date time datetime datetime-local month week number range color Similar to text, only different semantically Not supported by major browsers (chrome also)

New Input Type - url <input> tag with type=“url” For entering a single URL Automatic validation on Form Submit Keypad changes on mobiles <form> <label for=“link">Link</label> <input type=“url" name=“link"/> <input type=“submit”/> </form>

New Input Type - email <input> tag with type=“email” For entering a single/list of email addresses Automatic validation on Form Submit Keypad changes on mobiles <form> <label for=“email">Email</label> <input type=“email" name=“email"/> <input type=“submit”/> </form>

New Input Type – date <input> tag with type=“date” For entering a date <form> <label for=“date">Date</label> <input type=“date" name=“date"/> </form>

New Input Type – time <input> tag with type=“time” For entering a time value with hour, minute <form> <label for=“time">Time</label> <input type=“time" name=“time"/> </form>

New Input Type - number <input> tag with type=“number” For entering numerical input Automatic validation on Form Submit Keypad changes on mobiles Attributes min => Minimum value max => Maximum value Step => Increment value value => Default value <form> <label for=“a">A</label> <input type=“number name=“a"/> <input type=“submit”/> </form> spinbox

New Input Type – range <input> tag with type=“range” Attributes Uses a slider to select a number range For entering a numerical input Attributes min => Minimum value max => Maximum value Step => Increment value value => Default value <form> <label for=“a">A</label> <input type=“range" name=“a"/> </form>

New Input Type – color <input> tag with type=“color” For choosing color through a color well control <form> <label for=“color">Color</label> <input type=“color" name=“color"/> </form>

Web-based Systems | Misbhauddin FORM INPUT ELEMENTS TEXT AREA Web-based Systems | Misbhauddin

Text Area - Form Accept larger passages of text spanning multiple lines It is a paired element Use the <textarea> tag Important attributes cols - number of columns rows - number of rows <textarea name="comment“ rows=“5” cols=“10”>Add your comment here</textarea>