1. >> Introduction to HTML: Forms

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

3. 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

4. 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)

5. Fields of a Form
Label
Form Input Field

6. 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>

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

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

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

10. 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

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

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

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

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

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

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

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

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

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

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

21. 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>