Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
Montreal Girl Geeks: Building the Modern Web
Next
Download to read offline and view in fullscreen.

1912

Share

Download to read offline

Getting Information through HTML Forms

Download to read offline

Introduction to HTML forms, the different form elements that exist, and a 'security hack' that you might not know existed

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Getting Information through HTML Forms

  1. webDeV@rgu getting information from users html forms quick tip… THE “SECURITY HACK” AT THE END OFTHIS PRESENTATION IS SOMETHINGTHAT EVERYONE SHOULD KNOW!
  2. • HTML Forms • Form Presentation • Form Elements • Input Types • Input Attributes • Form Security Overview
  3. HTML Forms
  4. • Capturing user input • registering user information • entering username and password for login • posting status updates to social networks • submitting a search query • taking a questionnaire • Transmitting user input elsewhere • send to client side JavaScript for validation • send to server side process (PHP, Java, JavaScript) Purpose of html Forms
  5. Form Presentation
  6. a simple html form
  7. • The form tag contains all the input elements • <form> … </form> • Input elements can be of <input type=“” /> • Text/password/file or textarea • Radio button or Checkbox • Select boxes • All input elements should be given a form label • Improves accessibility if using a screen reader • <label> … </label> • Fieldsets can be used to graphically group input elements together • <fieldset> … </fieldset> Basic form elements
  8. <form> <fieldset> <legend>Please leave a comment...</legend> <label for="name">Name:</label> <input type="text" name="name" value="" /> <label for="email">Email:</label> <input type="text" name="email" value="" /> <label for="comments">Comment:</label> <textarea name="comments" cols="45“ rows="5"> </textarea> <input type="submit" value="Submit" /> </fieldset> </form>
  9. • Best practice is to use CSS • However, tables are still used a lot for layout of form elements • better than a messy form Form Presentation
  10. <form> <fieldset> <legend>Please leave a comment...</legend> <label for="name">Name:</label> <input type="text" name="name" value="" /> <br> <label for="email">Email:</label> <input type="text" name="email" value="" /> <br> <label for="comments">Comment:</label> <textarea name="comments" cols="45" rows="5"></textarea> <br> <input type="submit" value="Submit" /> </fieldset> </form>
  11. <style> input, textarea {width: 400px;} </style> <form> <fieldset> <legend>Please leave a comment...</legend> <table> <tr> <td><label>Name:</label></td> <td><input type="text" name="name" value="" /></td> </tr> <tr> <td><label>Email:</label></td> <td><input type="text" name="email" value="" /></td> </tr> <tr> <td><label>Comment:</label></td> <td><textarea name="comments" cols="45" rows="5"> </textarea></td> </tr> <tr> <td colspan=2><input type="submit" value="Submit" /></td> </tr> </table> </fieldset> </form>
  12. Column 1 Column 2 Row 1 Row 2 Row 3 Row 4
  13. Form Presentation • Best practice is to use CSS • However, tables are still used a lot for layout of form elements • better than a messy form • Next week we will look at CSS in a lot more detail so that you can get the hang of it.
  14. Form elements input types
  15. • Provides simple text input text <form> <label for=“firstname>First name:</label><br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form>
  16. • Provides text input that is hidden from the user password <form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form>
  17. <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mike"><br> Last name:<br> <input type="text" name="lastname" value="Crabb"><br><br> <input type="submit" value="Submit"> </form> • Submit button for forms submit
  18. <form> Birthday: <input type="date" name="bday"> </form> • The <input type="date"> is used for input fields that should contain a date. date
  19. • Provides for a selection of zero or more items from a list of options checkboxes <input type="checkbox" name="pets" value="loveCats">I love cats <br>
 <input type="checkbox" name="pets" value="loveDogs">I love dogs

  20. • Provides for only one selection from a list of options Radio buttons <input type="radio" name="cats" value="loveCats">I love cats <br>
 <input type="radio" name="cats" value="hateCats">I have no soul
  21. • Choose from a list of options • use the <select> tag • list <options> Selection (drop down) Box <label for="degreeTitle">Degree Title:</label>
 <select name="degreeTitle">
 <option value="cs">Computer Science</option>
 <option value="dm">Digital Media</option>
 <option value="cnmd">Computer Network Management and Design</option </select>
  22. • Provides for only one selection from a list of options coloUr <form> Select your favorite color: <input type="color" name="favcolor"> </form>
  23. • Provides for only one selection from a list of options email <form> E-mail: <input type="email" name="email"> <input type="submit"> </form>
  24. • Provides for only one selection from a list of options URL <form> Add your homepage: <input type="url" name="homepage"> </form>
  25. HTML5 form improvements email url Reset color check input is valid email address (something@something.something) check input is valid web address (http://www.something.something) Clears everything on the page Select a colour american spelling
  26. Form elements input attributes
  27. • The value attribute specifies the initial value for an input field: value <form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form>
  28. • The readonly attribute specifies that the input field is read only (cannot be changed) read only <form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> <br> Last name:<br> <input type="text" name="lastname"> </form>
  29. • The disabled attribute specifies that the input field is disabled. • A disabled element is un-usable and un-clickable. • Disabled elements will not be submitted Disabled <form action=""> First name:<br> <input type="text" name="firstname" value="John" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form>
  30. • The size attribute specifies the size (in characters) for the input field size <form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> <br> Last name:<br> <input type="text" name="lastname"> </form>
  31. • The maxlength attribute specifies the maximum allowed length for the input field: maxlength <form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> <br> Last name:<br> <input type="text" name="lastname"> </form>
  32. • The autocomplete attribute specifies whether a form or input field should have autocomplete on or off autocomplete <form autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>
  33. placeholder • The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format). <input type="text" name="fname" placeholder="First name">
  34. required • When present, it specifies that an input field must be filled out before submitting the form. • The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. Username: <input type="text" name="username" required> This one is important
  35. form security
  36. form security • Forms can be quite insecure when we are using them, we need to make sure that the right data is being seen by the right people • and that no-one can get access to the really sensitive data! For example…here’s how to find our a password on an unsecured computer PS - DON’T DO THIS ONE SOMEONE ELSES COMPUTER - YOU’ll GET INTO A LOT OF TROUBLE!!
  37. I’ve visited a website and have put in my username and password into the box provided. Let’s say that now I have to step away from my computer for 5 seconds…
  38. Some unsavoury character comes along and looks at my screen. They right click on the password field and then go to inspect, I wonder what they are up to?
  39. Now they are looking at the HTML for this web page and have an interest in the field that my password is in. It’s ok…its secure (it really isn’t).
  40. They change the form element from: <input type=“Password”> to <Input Type=“text”> and now my password is being shown to the world #awkward!
  41. • HTML Forms • Form Presentation • Form Elements • Input Types • Input Attributes • Form Security Recap
  42. get in touch! @mike_crabb Lecturer in Web Development at Robert Gordon University (Scotland) @rgucomputing Robert Gordon University - School of Computing Science and Digital Media
  • AlokDubey101

    Sep. 21, 2021
  • AdetroyiAanuoluwapo

    Sep. 20, 2021
  • chikawonah

    Sep. 16, 2021
  • BeaaAnderson

    Sep. 12, 2021
  • NamrataMaurya2

    Sep. 10, 2021
  • AliAlnaamani

    Sep. 9, 2021
  • RajMangalPandey

    Sep. 5, 2021
  • RodeladamBacares

    Sep. 4, 2021
  • MarinaMazahreh

    Sep. 2, 2021
  • SithakasoShangase

    Aug. 29, 2021
  • ssuser9c771b

    Aug. 28, 2021
  • SaeedKhan211667

    Aug. 24, 2021
  • BongthyLegacy

    Aug. 24, 2021
  • SandraCruzSullca

    Aug. 23, 2021
  • AshleyPaxton3

    Aug. 23, 2021
  • HamidouMohamadou

    Aug. 21, 2021
  • ShaktiShukla8

    Aug. 16, 2021
  • ThitiratChamnankitti

    Aug. 12, 2021
  • SocialEvans

    Aug. 11, 2021
  • BelloSodiq

    Aug. 10, 2021

Introduction to HTML forms, the different form elements that exist, and a 'security hack' that you might not know existed

Views

Total views

144,619

On Slideshare

0

From embeds

0

Number of embeds

199

Actions

Downloads

539

Shares

0

Comments

0

Likes

1,912

×