IS1500: Introduction to Web Development Collecting Data with Forms Martin Schedlbauer, Ph.D. [email protected].

IS1500: Introduction to Web DevelopmentCollecting Data with Forms

Martin Schedlbauer, [email protected]

Collecting Data with Forms 2

FORM CONCEPTSCollecting Data with Forms

IS1500


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


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.


Form Builders

• Form builders simplify the creation of forms and don’t require HTML coding.

IS1500


SECURING FORMS WITH CAPTCHACollecting Data with Forms

IS1500


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


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


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.


JOTFORM FORMSCollecting Data with Forms

IS1500


JotForm Form Elements

IS1500


Form Element Properties

IS1500


Embedding the Form

IS1500


E-Mail Forms Processor

• JotForm has a built-in forms processor that emails the form to a select email address.

IS1500


HTML FORM ELEMENTSCollecting Data with Forms

IS1500


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>


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


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>


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>


Input Elements: Password

• <input type="password"> defines a password field:

IS1500

<form>Password: <input type="password" name="pwd" /></form>


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>


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>


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>


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>


TextArea

• <textarea> defines a text box with multiple lines:

IS1500

<textarea rows="10" cols="30">The cat was playing in the garden.</textarea>


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" />


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


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>


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


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


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


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>



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


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


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


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>


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>



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


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


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


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>



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>



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>



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>


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>


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


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


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>


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


Summary, Review, & Questions…

IS1500

IS1500: Introduction to Web Development Collecting Data with Forms Martin Schedlbauer, Ph.D. [email protected].

Documents

form is1500collecting

forms is1500collecting

tag is1500collecting

bad data

collected data

html5 forms forms

form builders form builders

form concepts