Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Ā
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
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
7. ā¢ The form tag contains all the input elements
ā¢ <form> ā¦ </form>
ā¢ Input elements can be of <input type=āā />
ā¢ Text/password/ļ¬le 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
ā¢ <ļ¬eldset> ā¦ </ļ¬eldset>
Basic form elements
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.
15. ā¢ Provides simple text input
text
<form>
<label for=āļ¬rstname>First name:</label><br>
<input type="text" name="ļ¬rstname"><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="ļ¬rstname" 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
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
27. ā¢ The value attribute speciļ¬es the initial value for an
input ļ¬eld:
value
<form action="">
First name:<br>
<input type="text" name="ļ¬rstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
28. ā¢ The readonly attribute speciļ¬es that the input ļ¬eld
is read only (cannot be changed)
read only
<form action="">
First name:<br>
<input type="text" name="ļ¬rstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
29. ā¢ The disabled attribute speciļ¬es that the input ļ¬eld
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="ļ¬rstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
30. ā¢ The size attribute speciļ¬es the size (in characters)
for the input ļ¬eld
size
<form action="">
First name:<br>
<input type="text" name="ļ¬rstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
31. ā¢ The maxlength attribute speciļ¬es the maximum
allowed length for the input ļ¬eld:
maxlength
<form action="">
First name:<br>
<input type="text" name="ļ¬rstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
32. ā¢ The autocomplete attribute speciļ¬es whether a
form or input ļ¬eld should have autocomplete on or
oļ¬
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="oļ¬"><br>
<input type="submit">
</form>
33. placeholder
ā¢ The placeholder attribute speciļ¬es a hint that
describes the expected value of an input ļ¬eld (a
sample value or a short description of the format).
<input type="text" name="fname" placeholder="First name">
34. required
ā¢ When present, it speciļ¬es that an input ļ¬eld must
be ļ¬lled 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 ļ¬le.
Username: <input type="text" name="username" required>
This one is
important
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 ļ¬nd 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