is1500: introduction to web development collecting data with forms martin schedlbauer, ph.d....
TRANSCRIPT
IS1500: Introduction to Web DevelopmentCollecting Data with Forms
Martin Schedlbauer, [email protected]
Collecting Data with Forms 3
What is an Form?
• Forms are used to collect information from a user, e.g., reservations, orders, etc.
• The collected data is then passed to the web server for processing or storage in a database.
IS1500
Collecting Data with Forms 4
How do Forms Work?
IS1500
1. HTML form on the browser is filled out by the user
2. Upon submit the data is sent to a forms processing program on the web server
Form Processor1
1The form processor on the web server is written in a computer programming language such as PHP, ASP.NET, Zoho Deluge, Ruby, Java, C++, Python, etc.
Database
3. Data is stored in a database or sent as an email
Name=Mark, LimoneAddress=1 Main St.
Collecting Data with Forms 5
Form Builders
• Form builders simplify the creation of forms and don’t require HTML coding.
IS1500
Collecting Data with Forms 7
What is CAPTCHA?• A CAPTCHA is a program that protects
websites against bots by generating and grading tests that humans can pass but current computer programs cannot.
• For example, humans can read distorted text as the ones shown to the side, but current computer programs can't.
• So, the idea is that if a bot can't decipher the CAPTCHA code and the code is correct that the form must have been filled out by a human.
• This can help avoid getting spam through forms or bad data into a database.
IS1500
Collecting Data with Forms 8
History of CAPTCHA
• The term CAPTCHA was coined in 2000 by Luis von Ahn, Manuel Blum, Nicholas Hopper and John Langford of Carnegie Mellon University.
• CAPTCHA = Completely Automated Public Turing Test To Tell Computers and Humans Apart
IS1500
Collecting Data with Forms 9
Form with Captcha Fields
IS1500
• The form can only be submitted to the forms processor if the CAPTCHA verification code is correctly filled in.
• This prevents robots (automated form fillers) from filling out the form and flooding the forms database or email processor with spam.
Collecting Data with Forms 14
E-Mail Forms Processor
• JotForm has a built-in forms processor that emails the form to a select email address.
IS1500
Collecting Data with Forms 16
Form Element
• The <form> tag is used to create an HTML form
• All form input elements are contained within the <form> tag
IS1500
<form>…input elements…</form>
Collecting Data with Forms 17
HTML5 Forms
• Forms can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more
• A form can also contain select lists, textarea, fieldset, legend, and label elements
IS1500
Collecting Data with Forms 18
Form Attributes• name attribute is used to give a name to the
form• action attribute specifies the action to be
taken when the form is submitted • method attribute is used to specify the type of
request sent to the server (GET/POST)
IS1500
<form name="DemoForm" action="demo_form.php" method="get">...</form>
Collecting Data with Forms 19
Input Elements: Text
• <input type="text"> defines a one-line input field that a user can enter text into:
IS1500
<form>First name: <input type="text" name="firstname" /><br>Last name: <input type="text" name="lastname" /></form>
Collecting Data with Forms 20
Input Elements: Password
• <input type="password"> defines a password field:
IS1500
<form>Password: <input type="password" name="pwd" /></form>
Collecting Data with Forms 21
Input Elements: Radio Buttons
• <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
IS1500
<form><input type="radio" name="gender" value="male" />Male<br><input type="radio" name="gender" value="female" />Female</form>
Collecting Data with Forms 22
Input Elements: Checkboxes
• <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
IS1500
<form><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br><input type="checkbox" name="vehicle" value="Car" />I have a car </form>
Collecting Data with Forms 23
Input Elements: Submit Button
• <input type="submit"> defines a submit button.
• A submit button is used to send form data to a server
IS1500
<form name="input" action="demo_form_action.asp" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit“ /></form>
Collecting Data with Forms 24
Drop-Down List
• <select> defines a drop-down list with multiple values:
IS1500
<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected>Fiat</option><option value="audi">Audi</option></select></form>
Collecting Data with Forms 25
TextArea
• <textarea> defines a text box with multiple lines:
IS1500
<textarea rows="10" cols="30">The cat was playing in the garden.</textarea>
Collecting Data with Forms 26
Hidden Fields
• Hidden fields are form fields that contain data supplied by the programmer that are not visible to the user but only to the forms processor.
• This hidden field will send the value “aValue” to the forms processor under the name “var”.
IS1500
<input type="hidden" name="var" value="aValue" />
Collecting Data with Forms 27
HTML5 Form Elements: Datalist
• The <datalist> element specifies a list of pre-defined options for an <input> element
• The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.
• Use the <input> element's list attribute to bind it together with a <datalist> element.
IS1500
Collecting Data with Forms 28
HTML5 Form Elements: Datalist
IS1500
<form action="demo_form.asp" method="get"><input list="browsers" /><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist> </form>
Collecting Data with Forms 29
HTML5 Input Types: Number
• <input type="number"> is used for input fields that should contain a numeric value.
IS1500
<input type="number" value="3" name="quantity" min="1" max="5" />
Note: Not supported in <= IE9
Collecting Data with Forms 30
HTML5 Input Types: Date
• <input type="date"> is used for input fields that should contain a date.
IS1500
<input type="date" name="bday" min="2000-01-02" />
Note: Only supported in Safari and Chrome
Collecting Data with Forms 31
HTML5 Input Types: Color• <input type="color"> is used for input fields
that should contain a color.
IS1500
<form action="demo_form.asp"> Select your favorite color: <input type="color" name="favcolor" value="#ff0000" /> <input type="submit" value="Send" /></form>
Note: Not supported in Safari and IE9
Collecting Data with Forms 32
Input Elements: Range• <input type="range"> defines a slider• The range and step constraints are enforced
even during user input and the value attribute, if specified, must have a valid floating point number.
IS1500
<form action="demo_form.asp" method="get" >0<input type="range" id="a" name="a" min="-100" max="100" step="10" value="50" />100</form>
Note: Not supported in <= IE9
Collecting Data with Forms 33
HTML5 Input Types: Month
• <input type="month"> allows the user to select a month and year.
IS1500
<form action="demo_form.asp"> Birthday (month and year): <input type="month" name="bdaymonth" /> <input type="submit" value="Send" /></form>
Note: Not supported in IE and FireFox
Collecting Data with Forms 34
HTML5 Input Types: Time
• <input type="time"> allows the user to select a time (no time zone).
IS1500
<form action="demo_form.asp"> Select a time: <input type="time" name="usr_time" /> <input type="submit" value="Send" /></form>
Note: Only supported in Safari and Chrome
Collecting Data with Forms 35
HTML5 Input Types: Email
• <input type="email"> is used for input fields that should contain an e-mail address
• validated automatically when submitted
IS1500
<form action="demo_form.asp"> E-mail: <input type="email" name="email" /> <input type="submit" value="Send" /></form>
Note: Not supported in Safari and <= IE9
Collecting Data with Forms 36
HTML5 Input Types: Image • The input type="image" sends the X and Y
coordinates of the click that activated the image button
• When the button is clicked, the input is sent to the server as “name=&x=20&y=10”
IS1500
<form action="demo_form.asp"> Name: <input type="text" name="name“ /><br> <input type="image" src="img_submit.gif" alt="Submit" width="25" height="25" /></form>
Collecting Data with Forms 37
HTML5 Input Types: URL
• <input type="url"> is used for search fields (a search field behaves like a regular text field)
IS1500
<form action="demo_form.asp"> Add your homepage: <input type="url" name="homepage" /> <input type="submit" value="Send" /></form>
Note: Not supported in Safari and <= IE9
Collecting Data with Forms 38
HTML5 Attributes: autocomplete• When autocomplete is on, the browser
automatically completes values based on values that the user has entered before.
• It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.
IS1500
<form action="demo_form.asp" 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>
Note: Not supported in Opera
Collecting Data with Forms 39
HTML5 Attributes: novalidate
• The novalidate attribute is a boolean attribute.
• When present, it specifies that the form-data (input) should not be validated when submitted.
IS1500
<form action="demo_form.asp" novalidate> E-mail: <input type="email" name="user_email" /> <input type="submit" /></form>
Note: Not supported in Safari
Collecting Data with Forms 40
HTML5 Attributes: autofocus
• The autofocus attribute is a boolean attribute.• When present, it specifies that an <input>
element should automatically get focus when the page loads.
• Let the "First name" input field automatically get focus when the page loads:
IS1500
First name:<input type="text" name="fname" autofocus />
Collecting Data with Forms 41
HTML5 Attributes: required
• The required attribute is a boolean attribute.• When present, it specifies that an input field
must be filled out before submitting the form.
IS1500
<form action="demo_form.asp"> Username: <input type="text" name="usrname" required /> <input type="submit" /></form>
Note: Not supported in Safari and <= IE9
Collecting Data with Forms 42
HTML5 Attributes: placeholder • The placeholder attribute specifies a hint that
describes the expected value of an input field• The hint is displayed in the input field before
the user enters a value.
IS1500
<form action="demo_form.asp"> <input type="text" name="fname" placeholder="First name" /><br> <input type="text" name="lname" placeholder="Last name" /><br> <input type="submit" value="Submit" /></form>
Note: Not supported in <= IE9
Collecting Data with Forms 43
HTML5 Attributes: multiple • The multiple attribute is a boolean attribute• When present, it specifies that the user is
allowed to enter more than one value in the <input> element
IS1500
<form action="demo_form.asp"> Select images: <input type="file" name="img" multiple /> <input type="submit" /></form>
Note: Not supported in <= IE9
Collecting Data with Forms 44
PHP Form Handling• A simple HTML form with two input fields and a
submit button:
• On submitting the form, the form data is sent for processing to a PHP file named "welcome.php"
IS1500
<html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name" /> <br> E-mail: <input type="text" name="email" /> <br> <input type="submit" /> </form> </body></html>
Collecting Data with Forms 45
PHP Form Handling• To display the submitted data you could simply echo
all the variables as follows:
• The output would be like this:
IS1500
<html> <body> Welcome <?php echo $_POST["name"]; ?><br> Your email address is: <?php echo $_POST["email"]; ?> </body></html>
Collecting Data with Forms 46
GET• Both GET and POST create an array that holds
key/value pairs of data sent to the server
• Information sent from a form with the GET method is visible to everyone
• For example: http://boatventures.com/welcome.php?name=john&[email protected]
• GET puts a limit on the amount of information that can be sent
• GET may be used for sending non-sensitive data but has the advantage that the form can be bookmarked
IS1500
Collecting Data with Forms 47
POST• Information sent from a form with the POST
method is invisible to everyone• POST has no limits on the amount of
information• POST supports advanced functionality such as
support for multi-part binary input while uploading files to server
• POST may be used for sending sensitive data
IS1500
Collecting Data with Forms 48
A Complete Example: Form
IS1500
<form action="http://boatventures.us/testPHP_script.php" method="post"><table> <tr> <td>Name:</td>
<td> <input type="text" name="name" /></td><td>(User's name)</td>
</tr> <tr>
<td>E-mail: </td><td><input type="text" name="email" /></td><td>(Emaild of the user to whom the email is to be sent)</td>
</tr> … <tr>
<td></td><td><input type="submit" /></td>
</tr></table></form>
Collecting Data with Forms 49
A Complete Example: PHP
IS1500
<?php $name = $_POST['name']; $email = $_POST['email']; $subject = $_POST['subject']; $message = $_POST['message'];
echo "Welcome $name <br />";
// send mail mail($email,$subject,$message,"[email protected]");
echo "Email sent to $email.";?>
File named “testPHP_script.php” on AwardSpace.net in boatventure.us folder