1. IS1500: Introduction to Web Development
Collecting Data with Forms
Martin Schedlbauer, Ph.D.

2. Collecting Data with Forms
Form Concepts
IS1500
Collecting Data with Forms

3. Collecting Data with Forms
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. Collecting Data with Forms
How do Forms Work?
Upon submit the data is sent to a forms processing program on the web server
Form Processor1
Data is stored in a database or sent as an
Name=Mark, Limone
Address=1 Main St.
Database
HTML form on the browser is filled out by the user
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.
IS1500
Collecting Data with Forms

5. Collecting Data with Forms
Form Builders
Form builders simplify the creation of forms and don’t require HTML coding.
IS1500
Collecting Data with Forms

6. Securing Forms with CAPTCHA
Collecting Data with Forms
Securing Forms with CAPTCHA
IS1500
Collecting Data with Forms

7. Collecting Data with Forms
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. Collecting Data with Forms
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
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 processor with spam.
IS1500
Collecting Data with Forms

10. Collecting Data with Forms
JotForm Forms
IS1500
Collecting Data with Forms

11. Collecting Data with Forms
JotForm Form Elements
IS1500
Collecting Data with Forms

12. Form Element Properties
IS1500
Collecting Data with Forms

13. Collecting Data with Forms
Embedding the Form
IS1500
Collecting Data with Forms

14. E-Mail Forms Processor
JotForm has a built-in forms processor that s the form to a select address.
IS1500
Collecting Data with Forms

15. Collecting Data with Forms
HTML FORM Elements
IS1500
Collecting Data with Forms

16. Collecting Data with Forms
Form Element
The <form> tag is used to create an HTML form
All form input elements are contained within the <form> tag
<form> …
input elements
</form>
IS1500
Collecting Data with Forms

17. Collecting Data with Forms
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. Collecting Data with Forms
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)
<form name="DemoForm" action="demo_form.php" method="get">
...
</form>
IS1500
Collecting Data with Forms

19. Collecting Data with Forms
Input Elements: Text
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>
IS1500
Collecting Data with Forms

20. Input Elements: Password
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd" />
</form>
IS1500
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:
<form>
<input type="radio" name="gender" value="male" />Male<br>
<input type="radio" name="gender" value="female" />Female
</form>
IS1500
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.
<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>
IS1500
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
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit“ />
</form>
IS1500
Collecting Data with Forms

24. Collecting Data with Forms
Drop-Down List
<select> defines a drop-down list with multiple values:
<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>
IS1500
Collecting Data with Forms

25. Collecting Data with Forms
TextArea
<textarea> defines a text box with multiple lines:
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
IS1500
Collecting Data with Forms

26. Collecting Data with Forms
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”.
<input type="hidden" name="var" value="aValue" />
IS1500
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
<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>
IS1500
Collecting Data with Forms

29. HTML5 Input Types: Number
<input type="number"> is used for input fields that should contain a numeric value.
<input type="number" value="3" name="quantity" min="1" max="5" />
Note: Not supported in <= IE9
IS1500
Collecting Data with Forms

30. Collecting Data with Forms
HTML5 Input Types: Date
<input type="date"> is used for input fields that should contain a date.
<input type="date" name="bday" min=" " />
Note: Only supported in Safari and Chrome
IS1500
Collecting Data with Forms

31. HTML5 Input Types: Color
<input type="color"> is used for input fields that should contain a color.
<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
IS1500
Collecting Data with Forms

32. Collecting Data with Forms
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.
<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
IS1500
Collecting Data with Forms

33. HTML5 Input Types: Month
<input type="month"> allows the user to select a month and year.
<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
IS1500
Collecting Data with Forms

34. Collecting Data with Forms
HTML5 Input Types: Time
<input type="time"> allows the user to select a time (no time zone).
<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
IS1500
Collecting Data with Forms

35. HTML5 Input Types: Email
<input type=" "> is used for input fields that should contain an address
validated automatically when submitted
<form action="demo_form.asp">
<input type=" " name=" " />
<input type="submit" value="Send" />
</form>
Note: Not supported in Safari and <= IE9
IS1500
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”
<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>
IS1500
Collecting Data with Forms

37. Collecting Data with Forms
HTML5 Input Types: URL
<input type="url">  is used for search fields (a search field behaves like a regular text field)
<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
IS1500
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.
<form action="demo_form.asp" autocomplete="on">   First name:<input type="text" name="fname" /><br>   Last name: <input type="text" name="lname" /><br>    <input type=" " name=" " autocomplete="off" /><br>   <input type="submit" /> </form>
Note: Not supported in Opera
IS1500
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.
<form action="demo_form.asp" novalidate>    <input type=" " name="user_ " />   <input type="submit" /> </form>
Note: Not supported in Safari
IS1500
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:
First name:<input type="text" name="fname" autofocus />
IS1500
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.
<form action="demo_form.asp">
Username: <input type="text" name="usrname" required />
<input type="submit" />
</form>
Note: Not supported in Safari and <= IE9
IS1500
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.
<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
IS1500
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
<form action="demo_form.asp">
Select images: <input type="file" name="img" multiple />
<input type="submit" />
</form>
Note: Not supported in <= IE9
IS1500
Collecting Data with Forms

44. Collecting Data with Forms
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"
<html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name" />
<br> <input type="text" name=" " />
<br> <input type="submit" /> </form> </body> </html>
IS1500
Collecting Data with Forms

45. Collecting Data with Forms
PHP Form Handling
To display the submitted data you could simply echo all the variables as follows:
The output would be like this:
<html> <body> Welcome <?php echo $_POST["name"]; ?><br> Your address is: <?php echo $_POST[" "]; ?> </body> </html>
IS1500
Collecting Data with Forms

46. Collecting Data with Forms
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:
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. Collecting Data with Forms
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
<form action=" method="post">
<table>
<tr>
<td>Name:</td>
<td> <input type="text" name="name" /></td>
<td>(User's name)</td>
</tr>
<td> </td>
<td><input type="text" name=" " /></td>
<td>( d of the user to whom the is to be sent)</td> …
<td></td>
<td><input type="submit" /></td>
</table>
</form>
IS1500
Collecting Data with Forms

49. A Complete Example: PHP
File named “testPHP_script.php” on AwardSpace.net in boatventure.us folder
<?php
$name = $_POST['name'];
$ = $_POST[' '];
$subject = $_POST['subject'];
$message = $_POST['message'];
echo "Welcome $name <br />";
// send mail
echo " sent to $ .";
?>
IS1500
Collecting Data with Forms

50. Summary, Review, & Questions…
IS1500
Collecting Data with Forms