Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads.
webDeV@rgu
getting information from users
html forms
quick tip…
THE “SECURITY HACK” AT THE END OFTHIS PRESENTATION IS SOME...
• HTML Forms
• Form Presentation
• Form Elements
• Input Types
• Input Attributes
• Form Security
Overview
HTML
Forms
• Capturing user input
• registering user information
• entering username and password for login
• posting status updates ...
Form
Presentation
a simple html form
• The form tag contains all the input elements
• <form> … </form>
• Input elements can be of <input type=“” />
• Text/pass...
<form>
<fieldset>
<legend>Please leave a comment...</legend>
<label for="name">Name:</label>
<input type="text" name="name"...
• Best practice is to use CSS
• However, tables are still used a lot for layout of
form elements
• better than a messy for...
<form>
<fieldset>
<legend>Please leave a comment...</legend>
<label for="name">Name:</label>
<input type="text" name="name"...
<style> input, textarea {width: 400px;} </style>
<form>
<fieldset>
<legend>Please leave a comment...</legend>
<table>
<tr>
...
Column 1 Column 2
Row 1
Row 2
Row 3
Row 4
Form Presentation
• Best practice is to use CSS
• However, tables are still used a lot for layout of
form elements
• bette...
Form
elements
input types
• Provides simple text input
text
<form>
<label for=“firstname>First name:</label><br>
<input type="text" name="firstname"><...
• Provides text input that is hidden from the user
password
<form>
User name:<br>
<input type="text" name="username"><br>
...
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mike"><br>
Last name:<br>
<input...
<form>
Birthday:
<input type="date" name="bday">
</form>
• The <input type="date"> is used for input fields that
should con...
• Provides for a selection of zero or more items from
a list of options
checkboxes
<input type="checkbox" name="pets" valu...
• Provides for only one selection from a list of options
Radio buttons
<input type="radio" name="cats" value="loveCats">I ...
• Choose from a list of options
• use the <select> tag
• list <options>
Selection (drop down) Box
<label for="degreeTitle"...
• Provides for only one selection from a list of options
coloUr
<form>
Select your favorite color:
<input type="color" nam...
• Provides for only one selection from a list of options
email
<form>
E-mail:
<input type="email" name="email">
<input typ...
• Provides for only one selection from a list of options
URL
<form>
Add your homepage:
<input type="url" name="homepage">
...
HTML5 form improvements
email
url
Reset
color
check input is valid email address
(something@something.something)
check inp...
Form
elements
input attributes
• The value attribute specifies the initial value for an
input field:
value
<form action="">
First name:<br>
<input type="te...
• The readonly attribute specifies that the input field
is read only (cannot be changed)
read only
<form action="">
First na...
• The disabled attribute specifies that the input field
is disabled.
• A disabled element is un-usable and un-clickable.
• D...
• The size attribute specifies the size (in characters)
for the input field
size
<form action="">
First name:<br>
<input typ...
• The maxlength attribute specifies the maximum
allowed length for the input field:
maxlength
<form action="">
First name:<b...
• The autocomplete attribute specifies whether a
form or input field should have autocomplete on or
off
autocomplete
<form au...
placeholder
• The placeholder attribute specifies a hint that
describes the expected value of an input field (a
sample value...
required
• When present, it specifies that an input field must
be filled out before submitting the form.
• The required attri...
form
security
form security
• Forms can be quite insecure when we are using
them, we need to make sure that the right data
is being seen...
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
a...
Some unsavoury character comes along
and looks at my screen. They right click on
the password field and then go to inspect...
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 s...
They change the form element from:
<input type=“Password”>
to
<Input Type=“text”>
and now my password is being shown to th...
• HTML Forms
• Form Presentation
• Form Elements
• Input Types
• Input Attributes
• Form Security
Recap
get in touch!
@mike_crabb
Lecturer in Web Development at Robert Gordon University
(Scotland)
@rgucomputing
Robert Gordon U...
Upcoming SlideShare
Loading in …5
×
94,442 views

Published on

• 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

Published in: Design, Internet, Software
  • Your opinions matter! get paid BIG $$$ for them! START NOW!!.. ♥♥♥ https://tinyurl.com/realmoneystreams2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The methods and techniques in the PE Bible are exclusive to this unique program. The two step system involves low cost off the shelf natural supplements and a specially designed exercise program. Many users experience gains of almost an inch within just a few weeks of starting this unique program! Imagine having 2-4 inches of extra length and girth added onto your penis size, this Penis Enlargement Bible makes it possible. Over 5000 copies of this product have already been sold, and unlike most products on the market there is real video proof from actual users that show REAL results. You can see the video here ♥♥♥ https://tinyurl.com/getpebible2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Natural enlargement book for free? [Download] Your natural enlargement blueprint. ♣♣♣ https://tinyurl.com/getpebible2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I'll tell you right now (and I've got proof), that anyone who tells you "size doesn't matter to women" is flat out lying to your face and trying to make you feel better... Heck, just recently I asked a focus group of women via an anonymous online survey if size matters, and again and again they said "Oh my god, I HATE IT when it's SMALL." For a long time I didn't know what to tell the guys who'd write in to me and ask how to get "bigger." I'd say something lame like "Women actually like guys who are smaller... you just have to get good with your hands." Then I found "THE BIBLE of Penis Enlargement" by this guy named John Collins ➤➤ https://tinyurl.com/getpebible2019
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
monaliza.kiev.ua

https://citroen.niko.ua

×