Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML Forms

Avatar for Leander Jehl Leander Jehl
January 21, 2019

HTML Forms

Avatar for Leander Jehl

Leander Jehl

January 21, 2019
Tweet

More Decks by Leander Jehl

Other Decks in Education

Transcript

  1. Forms - A group of UI controls that accepts information

    from the user and sends the information to a web server - Today: how to make forms - Sending and processing forms comes later
  2. Form - In between <form> and </form> - action is

    the address where the form is sent - required attribute, but can be set empty <form action="">
 
 </form>
  3. The input element - <input> is used for several different

    types of controls (text, password, radio, checkbox) - Obligatory attributes - type — determines the type of control (text, checkbox, radio, etc.) - name — to identify the form control uniquely (sent back to the server when the form is submitted) - There are additional optional attributes depending on the type
  4. Text input - <input type="text" name="…" /> - Attributes -

    size — width in terms of characters - maxlength — maximum number of characters the user may enter - value — sets the default (initial) value for the field Zip code: <input type="text" name="zip" maxlength="4" />
  5. Password input - <input type="password" name="…" /> - Attributes -

    size — width in terms of characters - maxlength — maximum number of characters the user may enter - value — sets the default (initial) value for the field - Password is hidden only on the screen, it is not sent securely to the server (!) Password: <input type="password" name="pw" />
  6. Number input - <input type="number" name="…" /> - Attributes -

    size — width - min — minimum value - max — maximum value - step — increments - value — sets the default (initial) value for the field Quantity:
 <input type="number" name="points" size="3" min="0" max="100" step="10" value="30">
  7. Radio button - Let the user select only one of

    a limited number of choices - <input type="radio" name="…" value="…" /> - Each option should have the same name - Value of value is sent to the server for the selected option - checked indicates which option should be selected initially Preference:
 <input type="radio" name="pref" value="male" /> Male
 <input type="radio" name="pref" value="female" /> Female
  8. Checkbox - Let the user select zero or more of

    a limited number of choices - <input type="checkbox" name="…" value="…" /> - Each option should have a different name - Value of value is sent to the server for the selected option - checked indicates if the option should be checked initially Preference:
 <input type="checkbox" name="pref1" value="male" /> Male
 <input type="checkbox" name="pref2" value="female" /> Female
  9. Textarea - <textarea name="…">…</textarea> - Attributes - cols — width

    (measured in characters) - rows — height (number of rows) - Closing tag is mandatory! - Content of the tag is the initial input value What do you think? 
 <textarea name="comment" cols="40" rows="3"></textarea>
  10. Dropdown list - Let the user select a single option

    from a dropdown list - <select name="…">…</select> - Each option is <option value="…">…</option> - Value of value is sent to the server for the selected option - selected can be used to set the default option <select name="age">
 <option value="1">-18</option>
 <option value="2" selected>18-35</option>
 <option value="3">35-50</option>
 <option value="4">50-</option>
 </select>
  11. Multichoice select list - Let the user select multiple options

    from a list - <select name="…" multiple>…</select> - Each option is <option value="…">…</option> - Value of value is sent to the server for the selected option - selected can be used to set the default selection(s) <select name="age" multiple>
 <option value="1">-18</option>
 <option value="2" selected>18-35</option>
 <option value="3">35-50</option>
 <option value="4" selected>50-</option>
 </select>
  12. Hidden form variables - To pass on information that is

    not entered by the user - Not shown on the page, but sent along to the server the same way as any other variable <input type="hidden" name="secret" value="nosecret" />
  13. Global attributes - disabled — the field is not usable,

    content cannot be copied from it - readonly — the content cannot be changed, but a user can tab to the field and copy content from it - required — the input field must be filled out before submitting the form
  14. Submit button - <input type="submit" /> - Attributes - value

    — the text that appears on the button - name — name of the button <input type="submit" value="Awesome" />
  15. Labeling form controls - <label> can be used in two

    ways - Wrapped around both the text description and the form input
 
 - Kept separate from the form control and using the for attribute - The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together <label>Name: <input type="text" name="name" /></label> <label for="name">Name</label>
 <input type="text" name="name" id="name" />
  16. Placeholder text - placeholder="…" — specifies a short hint that

    describes the expected value of an input field - The hint is displayed before the user enters a value into the field - Works for the following - input types: text, search, url, tel, email, password - textarea <input type="text" name="name" size="20" placeholder="Firstname, lastname" />
  17. Grouping fields - <fieldset>…</fieldset> - Used for grouping related elements

    in a form - <legend> can be used inside to provide a caption (optional) <fieldset>
 <legend>Delivery address</legend>
 <label>City: <input type="text" name="city" size="10" /></label>
 <label>Zip: <input type="text" name="zip" size="4" /></label>
 <label>Street: <input type="text" name="street" size="20" /></label>
 <label>House no: <input type="text" name="houseno" size="4" /></label>
 </fieldset>
  18. More HTML5 input types - Date - Email - URL

    - Search - Color - … - See http://www.w3schools.com/html/html_form_input_types.asp
  19. References - HTML5 test - https://css-tricks.com/centering-css-complete-guide/ - Styling forms using

    CSS - http://tutorials.jenkov.com/css/forms.html - https://jonathan-harrell.com/advanced-css-form-styling/ - https://www.sanwebe.com/2014/08/css-html-forms-designs - A/B testing quiz - http://bit.ly/2n7P6un