1. >> More on HTML Forms

2. Web-Based Systems - Misbhauddin
Recall
Form Elements
Label
Text Fields and Text Areas
Multiple Choice Elements
Form Buttons
Other Inputs
Hidden Inputs
File Inputs
Field Sets
Legend
Web-Based Systems - Misbhauddin

3. Multiple Choice Inputs & Menus
FORM INPUT ELEMENTS
Multiple Choice Inputs & Menus
Web-based Systems | Misbhauddin

4. Radio Button - Form
Radio buttons permit users to select one option only
<input> tag with type=“radio”
name - to group radio buttons
value - value sent to JS/PHP program
checked - specifies pre-selection
<form>
<label for="gender">Gender</label>
<input type="radio" name="gender"
value="male“ checked/> Male
value="female"/>Female
</form>
Gender
Male
Female

5. Checkbox - Form Allow users to select multiple values
<input> tag with type=“checkbox”
name - assigns a name to the field
value - value sent to JS/PHP program
checked - specifies pre-selection
<form>
<label for="topping">Topping</label>
<input type="checkbox" name="topping"
value="ckn" checked/> Chicken
value="mush"/>Mushroom
</form>
Topping √
Chicken
Mushroom

6. Dropdown List - Form Use the <select> tag
name - assigns a name to the tag
Add options using the <option> tag between <select>….</select>
Add option name between <option>…….</option> tags
Use the value attribute to assign a value to be used by the code
<form>
<select name=“country”>
<option value="sa">Saudi Arabia</option>
<option value="bh"> Bahrain</option>
</select>
</form>

7. Multiple Selections
Allows a user to choose more than one option from the list at a time
Boolean attribute multiple used in the Select Tag
Need to hold down the Ctrl key while clicking to make their selections

8. Submit & Reset - Form Default action buttons provided by HTML
Submit “submits” the form and Reset “clears” the form
Use the <input> tag again
Attributes – type and value
type = “submit” or type = “reset”
value = assign a value to change the name of the button

9. Buttons - Form Performs the same as the input submit button
It is a paired tag
By default act as a submit button – so no type attribute needed.
Can assign custom action using the onclick attribute (will learn more in JS)
<button name="submit">
<strong>Send Us</strong> a Message
</button>

10. Web-based Systems | Misbhauddin
FORM INPUT ELEMENTS
Other Inputs
Web-based Systems | Misbhauddin

11. HIDDEN INPUT
Way to pass data to the server without displaying it to users
Use the <input> tag again
Attributes – type and value
type = “hidden”
value = assign a value to be used by the server
<input type="hidden" name="tracking-code" value="abc-123">

12. FILE INPUT Allow users to add a file to a form
Like attaching a file to an
Use the <input> tag again
Attributes – type
type = “file”
<input type="file" name="file">

13. FIELDSET Group form controls and labels into organized sections
Like <section>
It is a paired tag
<fieldset>
<label>
Username
<input type="text" name="username">
</label>
Password
<input type="text" name="password">
</fieldset>

14. LEGEND
Provides a caption, or heading, for the <fieldset> element
It is a paired tag
<fieldset>
<legend>Login</legend>
<label>
Username
<input type="text" name="username">
</label>
Password
<input type="text" name="password">
</fieldset>

15. Form & Input Attributes
FORM INPUT ELEMENTS
Form & Input Attributes
Web-based Systems | Misbhauddin

16. DISABLED
Boolean attribute turns off an element or control so that it is not available for interaction or input
Disabled control will not send any value to the server
<input type="text" name="username" disabled>

17. PLACEHOLDER
Gives the user a hint about what sort of data they should enter
Can be applied to input and textarea
<form>
<input type="text" name="lname" placeholder=“First Name”/>
<input type="text" name="lname“ placeholder=“Last Name”/>
</form>

18. REQUIRED A boolean attribute that means the element is required
Automatic validation on Form Submit
<form>
<label for=“uname">Username</label>
<input type="text" name=“uname“ required/>
<input type=“submit”/>
</form>

19. AUTOFOCUS Focuses the input on the element when the page is loaded
Can be applied to input, select, textarea, and button
<form>
<label for="fname">First Name</label>
<input type="text" name="lname" autofocus/>
<label for="lname">Last Name</label>
<input type="text" name="lname"/>
</form>

20. AUTOCOMPLETE
For specifying that a field should not autocomplete or be pre-filled by the browser based on a user's past entries
By default, autocomplete is in the on state
<form>
<label for=“uname">Username</label>
<input type="text" name=“uname“ autocomplete=“off”/>
<input type=“submit”/>
</form>