SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Downloaden Sie, um offline zu lesen
webDeV@rgu
getting information from users
html forms
quick tip…
THE “SECURITY HACK” AT THE END OFTHIS PRESENTATION IS SOMETHINGTHAT EVERYONE SHOULD KNOW!
• 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 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
Form
Presentation
a simple html form
• 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
<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>
• 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
<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>
<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>
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
• 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.
Form
elements
input types
• 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>
• 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>
<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
<form>
Birthday:
<input type="date" name="bday">
</form>
• The <input type="date"> is used for input fields that
should contain a date.
date
• 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

• 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
• 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>
• Provides for only one selection from a list of options
coloUr
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
• Provides for only one selection from a list of options
email
<form>
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
• Provides for only one selection from a list of options
URL
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
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
Form
elements
input attributes
• 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>
• 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>
• 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>
• 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>
• 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>
• 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>
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">
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
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 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!!
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…
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?
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).
They change the form element from:
<input type=“Password”>
to
<Input Type=“text”>
and now my password is being shown to the
world #awkward!
• 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 University - School of Computing Science and
Digital Media

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScriptT11 Sessions
 
Computer fandamental bangla by soikot pdf
Computer fandamental bangla by soikot pdfComputer fandamental bangla by soikot pdf
Computer fandamental bangla by soikot pdfShifat Ahmed
 
Presentation microsoft office 2013 akshay
Presentation microsoft office 2013 akshayPresentation microsoft office 2013 akshay
Presentation microsoft office 2013 akshayAkshay Singh
 
Computer Basic Bangla
Computer Basic BanglaComputer Basic Bangla
Computer Basic BanglaS.M. Sohag
 
Intermediate computer skills
Intermediate computer skillsIntermediate computer skills
Intermediate computer skillsTHickox
 
Web Technology Lab File
Web Technology Lab FileWeb Technology Lab File
Web Technology Lab FileKandarp Tiwari
 
Microsoft Access 2007
Microsoft Access 2007Microsoft Access 2007
Microsoft Access 2007Reshma Arun
 
Windows 7 Basics
Windows 7 BasicsWindows 7 Basics
Windows 7 BasicscquirinCS
 
Getting into HTML
Getting into HTMLGetting into HTML
Getting into HTMLispkosova
 
Basic Javascript
Basic JavascriptBasic Javascript
Basic JavascriptBunlong Van
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object ModelWebStackAcademy
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLGrayzon Gonzales, LPT
 
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaAnton Chandra
 
3. Utilización de los objetos predefinidos del lenguaje
3. Utilización de los objetos predefinidos del lenguaje3. Utilización de los objetos predefinidos del lenguaje
3. Utilización de los objetos predefinidos del lenguajeLaura Folgado Galache
 

Was ist angesagt? (20)

Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
 
Research Methods in UX
Research Methods in UXResearch Methods in UX
Research Methods in UX
 
Computer fandamental bangla by soikot pdf
Computer fandamental bangla by soikot pdfComputer fandamental bangla by soikot pdf
Computer fandamental bangla by soikot pdf
 
Presentation microsoft office 2013 akshay
Presentation microsoft office 2013 akshayPresentation microsoft office 2013 akshay
Presentation microsoft office 2013 akshay
 
Computer Basic Bangla
Computer Basic BanglaComputer Basic Bangla
Computer Basic Bangla
 
Intermediate computer skills
Intermediate computer skillsIntermediate computer skills
Intermediate computer skills
 
Web Technology Lab File
Web Technology Lab FileWeb Technology Lab File
Web Technology Lab File
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
Microsoft Access 2007
Microsoft Access 2007Microsoft Access 2007
Microsoft Access 2007
 
Windows 7 Basics
Windows 7 BasicsWindows 7 Basics
Windows 7 Basics
 
Html forms
Html formsHtml forms
Html forms
 
Getting into HTML
Getting into HTMLGetting into HTML
Getting into HTML
 
Basic Javascript
Basic JavascriptBasic Javascript
Basic Javascript
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
JavaScript - Chapter 12 - Document Object Model
  JavaScript - Chapter 12 - Document Object Model  JavaScript - Chapter 12 - Document Object Model
JavaScript - Chapter 12 - Document Object Model
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTML
 
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
 
3. Utilización de los objetos predefinidos del lenguaje
3. Utilización de los objetos predefinidos del lenguaje3. Utilización de los objetos predefinidos del lenguaje
3. Utilización de los objetos predefinidos del lenguaje
 

Andere mochten auch

Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebRachel Andrew
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXPeter Rozek
 
Internet of Things - The Tip of an Iceberg
Internet of Things - The Tip of an IcebergInternet of Things - The Tip of an Iceberg
Internet of Things - The Tip of an IcebergDr. Mazlan Abbas
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the InternetMike Crabb
 
Node.js and The Internet of Things
Node.js and The Internet of ThingsNode.js and The Internet of Things
Node.js and The Internet of ThingsLosant
 
Finding Our Happy Place in the Internet of Things
Finding Our Happy Place in the Internet of ThingsFinding Our Happy Place in the Internet of Things
Finding Our Happy Place in the Internet of ThingsPamela Pavliscak
 
Health and Well-Being on the Social Web
Health and Well-Being on the Social WebHealth and Well-Being on the Social Web
Health and Well-Being on the Social Webron mader
 
How Much Further Will Internet Stocks Fall? (Share Price Performance)
How Much Further Will Internet Stocks Fall? (Share Price Performance)How Much Further Will Internet Stocks Fall? (Share Price Performance)
How Much Further Will Internet Stocks Fall? (Share Price Performance)Mahesh Vellanki
 
Net neutrality: The Basics
Net neutrality: The BasicsNet neutrality: The Basics
Net neutrality: The BasicsInterQuest Group
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with DataSeth Familian
 
25 Festive Fonts For Women Oriented Businesses!
25 Festive Fonts For Women Oriented Businesses!25 Festive Fonts For Women Oriented Businesses!
25 Festive Fonts For Women Oriented Businesses!DesignMantic
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging ChallengesAaron Irizarry
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsLinkedIn
 
Mobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalMobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalAleyda Solís
 
Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)a16z
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesNed Potter
 
IT in Healthcare
IT in HealthcareIT in Healthcare
IT in HealthcareNetApp
 

Andere mochten auch (20)

Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern Web
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
Internet of Things - The Tip of an Iceberg
Internet of Things - The Tip of an IcebergInternet of Things - The Tip of an Iceberg
Internet of Things - The Tip of an Iceberg
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the Internet
 
Node.js and The Internet of Things
Node.js and The Internet of ThingsNode.js and The Internet of Things
Node.js and The Internet of Things
 
Finding Our Happy Place in the Internet of Things
Finding Our Happy Place in the Internet of ThingsFinding Our Happy Place in the Internet of Things
Finding Our Happy Place in the Internet of Things
 
Build Features, Not Apps
Build Features, Not AppsBuild Features, Not Apps
Build Features, Not Apps
 
Valentine's Day
Valentine's DayValentine's Day
Valentine's Day
 
Health and Well-Being on the Social Web
Health and Well-Being on the Social WebHealth and Well-Being on the Social Web
Health and Well-Being on the Social Web
 
How Much Further Will Internet Stocks Fall? (Share Price Performance)
How Much Further Will Internet Stocks Fall? (Share Price Performance)How Much Further Will Internet Stocks Fall? (Share Price Performance)
How Much Further Will Internet Stocks Fall? (Share Price Performance)
 
Net neutrality: The Basics
Net neutrality: The BasicsNet neutrality: The Basics
Net neutrality: The Basics
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
25 Festive Fonts For Women Oriented Businesses!
25 Festive Fonts For Women Oriented Businesses!25 Festive Fonts For Women Oriented Businesses!
25 Festive Fonts For Women Oriented Businesses!
 
Digital in 2016
Digital in 2016Digital in 2016
Digital in 2016
 
Designing Teams for Emerging Challenges
Designing Teams for Emerging ChallengesDesigning Teams for Emerging Challenges
Designing Teams for Emerging Challenges
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
 
Mobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalMobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigital
 
Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and Archives
 
IT in Healthcare
IT in HealthcareIT in Healthcare
IT in Healthcare
 

Ähnlich wie Getting Information through HTML Forms

Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio videoSaad Sheikh
 
Web forms and html (lect 4)
Web forms and html (lect 4)Web forms and html (lect 4)
Web forms and html (lect 4)Salman Memon
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validationMaitree Patel
 
web-lab2 for computer science html tss css java
web-lab2 for computer science html tss css javaweb-lab2 for computer science html tss css java
web-lab2 for computer science html tss css javashereifhany
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML FormNosheen Qamar
 
HTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptxHTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptxKamranSolangi1
 
FormL13.pptx
FormL13.pptxFormL13.pptx
FormL13.pptxserd4
 
INTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptxINTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptxSarthakrOkr
 
HTML 5 Simple Tutorial Part 4
HTML 5 Simple Tutorial Part 4HTML 5 Simple Tutorial Part 4
HTML 5 Simple Tutorial Part 4Sanjeev Kumar
 
18servers And Forms
18servers And Forms18servers And Forms
18servers And FormsAdil Jafri
 

Ähnlich wie Getting Information through HTML Forms (20)

Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
 
Web forms and html (lect 4)
Web forms and html (lect 4)Web forms and html (lect 4)
Web forms and html (lect 4)
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
 
Forms
FormsForms
Forms
 
Html forms
Html formsHtml forms
Html forms
 
htmlcss.pdf
htmlcss.pdfhtmlcss.pdf
htmlcss.pdf
 
CSS_Forms.pdf
CSS_Forms.pdfCSS_Forms.pdf
CSS_Forms.pdf
 
web-lab2 for computer science html tss css java
web-lab2 for computer science html tss css javaweb-lab2 for computer science html tss css java
web-lab2 for computer science html tss css java
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
 
HTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptxHTML Forms Basics by Kamran Solangi.pptx
HTML Forms Basics by Kamran Solangi.pptx
 
Forms Part 1
Forms Part 1Forms Part 1
Forms Part 1
 
Unit 2 (it workshop)
Unit 2 (it workshop)Unit 2 (it workshop)
Unit 2 (it workshop)
 
FormL13.pptx
FormL13.pptxFormL13.pptx
FormL13.pptx
 
HTML
HTML HTML
HTML
 
Chapter 9: Forms
Chapter 9: FormsChapter 9: Forms
Chapter 9: Forms
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
Lesson 15
Lesson 15Lesson 15
Lesson 15
 
INTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptxINTRODUCTION TO HTML & CSS .pptx
INTRODUCTION TO HTML & CSS .pptx
 
HTML 5 Simple Tutorial Part 4
HTML 5 Simple Tutorial Part 4HTML 5 Simple Tutorial Part 4
HTML 5 Simple Tutorial Part 4
 
18servers And Forms
18servers And Forms18servers And Forms
18servers And Forms
 

Mehr von Mike Crabb

Hard to Reach Users in Easy to Reach Places
Hard to Reach Users in Easy to Reach PlacesHard to Reach Users in Easy to Reach Places
Hard to Reach Users in Easy to Reach PlacesMike Crabb
 
Accessible and Assistive Interfaces
Accessible and Assistive InterfacesAccessible and Assistive Interfaces
Accessible and Assistive InterfacesMike Crabb
 
Accessible Everyone
Accessible EveryoneAccessible Everyone
Accessible EveryoneMike Crabb
 
The Peer Review Process
The Peer Review ProcessThe Peer Review Process
The Peer Review ProcessMike Crabb
 
Managing Quality In Qualitative Research
Managing Quality In Qualitative ResearchManaging Quality In Qualitative Research
Managing Quality In Qualitative ResearchMike Crabb
 
Analysing Qualitative Data
Analysing Qualitative DataAnalysing Qualitative Data
Analysing Qualitative DataMike Crabb
 
Conversation Discourse and Document Analysis
Conversation Discourse and Document AnalysisConversation Discourse and Document Analysis
Conversation Discourse and Document AnalysisMike Crabb
 
Ethnographic and Observational Research
Ethnographic and Observational ResearchEthnographic and Observational Research
Ethnographic and Observational ResearchMike Crabb
 
Doing Focus Groups
Doing Focus GroupsDoing Focus Groups
Doing Focus GroupsMike Crabb
 
Doing Interviews
Doing InterviewsDoing Interviews
Doing InterviewsMike Crabb
 
Designing Qualitative Research
Designing Qualitative ResearchDesigning Qualitative Research
Designing Qualitative ResearchMike Crabb
 
Introduction to Accessible Design
Introduction to Accessible DesignIntroduction to Accessible Design
Introduction to Accessible DesignMike Crabb
 
Accessible Everyone
Accessible EveryoneAccessible Everyone
Accessible EveryoneMike Crabb
 
Texture and Glyph Design
Texture and Glyph DesignTexture and Glyph Design
Texture and Glyph DesignMike Crabb
 
Pattern Perception and Map Design
Pattern Perception and Map DesignPattern Perception and Map Design
Pattern Perception and Map DesignMike Crabb
 
Dealing with Enterprise Level Data
Dealing with Enterprise Level DataDealing with Enterprise Level Data
Dealing with Enterprise Level DataMike Crabb
 
Using Cloud in an Enterprise Environment
Using Cloud in an Enterprise EnvironmentUsing Cloud in an Enterprise Environment
Using Cloud in an Enterprise EnvironmentMike Crabb
 
Teaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of TomorrowTeaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of TomorrowMike Crabb
 
Sql Injection and XSS
Sql Injection and XSSSql Injection and XSS
Sql Injection and XSSMike Crabb
 
Forms and Databases in PHP
Forms and Databases in PHPForms and Databases in PHP
Forms and Databases in PHPMike Crabb
 

Mehr von Mike Crabb (20)

Hard to Reach Users in Easy to Reach Places
Hard to Reach Users in Easy to Reach PlacesHard to Reach Users in Easy to Reach Places
Hard to Reach Users in Easy to Reach Places
 
Accessible and Assistive Interfaces
Accessible and Assistive InterfacesAccessible and Assistive Interfaces
Accessible and Assistive Interfaces
 
Accessible Everyone
Accessible EveryoneAccessible Everyone
Accessible Everyone
 
The Peer Review Process
The Peer Review ProcessThe Peer Review Process
The Peer Review Process
 
Managing Quality In Qualitative Research
Managing Quality In Qualitative ResearchManaging Quality In Qualitative Research
Managing Quality In Qualitative Research
 
Analysing Qualitative Data
Analysing Qualitative DataAnalysing Qualitative Data
Analysing Qualitative Data
 
Conversation Discourse and Document Analysis
Conversation Discourse and Document AnalysisConversation Discourse and Document Analysis
Conversation Discourse and Document Analysis
 
Ethnographic and Observational Research
Ethnographic and Observational ResearchEthnographic and Observational Research
Ethnographic and Observational Research
 
Doing Focus Groups
Doing Focus GroupsDoing Focus Groups
Doing Focus Groups
 
Doing Interviews
Doing InterviewsDoing Interviews
Doing Interviews
 
Designing Qualitative Research
Designing Qualitative ResearchDesigning Qualitative Research
Designing Qualitative Research
 
Introduction to Accessible Design
Introduction to Accessible DesignIntroduction to Accessible Design
Introduction to Accessible Design
 
Accessible Everyone
Accessible EveryoneAccessible Everyone
Accessible Everyone
 
Texture and Glyph Design
Texture and Glyph DesignTexture and Glyph Design
Texture and Glyph Design
 
Pattern Perception and Map Design
Pattern Perception and Map DesignPattern Perception and Map Design
Pattern Perception and Map Design
 
Dealing with Enterprise Level Data
Dealing with Enterprise Level DataDealing with Enterprise Level Data
Dealing with Enterprise Level Data
 
Using Cloud in an Enterprise Environment
Using Cloud in an Enterprise EnvironmentUsing Cloud in an Enterprise Environment
Using Cloud in an Enterprise Environment
 
Teaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of TomorrowTeaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of Tomorrow
 
Sql Injection and XSS
Sql Injection and XSSSql Injection and XSS
Sql Injection and XSS
 
Forms and Databases in PHP
Forms and Databases in PHPForms and Databases in PHP
Forms and Databases in PHP
 

Kürzlich hochgeladen

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Kürzlich hochgeladen (19)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

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/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.
  • 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
  • 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
  • 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