CREATING A SIMPLE WEB FORM IN HTML IN THIS

EXEEXE A SIMPLE TOOL FOR CREATING SEQUENCES
15 Instructions for Creating a File to Upload Inventory
195 DOCUMENT TYPE DEFINITIONS (DTDS) CREATING A DOCUMENT TYPE

2 CREATING A DATASET OF PHASE SPACE DENSITY AND
200 CREATING A CULTURE OF RESPECT AND RAPPORT
A CTIVITY CSS NAVIGATION 5 CREATING A HORIZONTAL

HANDOUT TITLE:

CREATING A SIMPLE WEB FORM IN HTML IN THIS



CREATING A SIMPLE WEB FORM IN HTML IN THIS

CREATING A SIMPLE WEB FORM IN HTML






In this exercise you will create a basic Web form using the HTML <form> and <input> tags. Note that the action attribute in the <form> tag will point to a public test engine that you can use to check your form output.


Note that all form field elements share an attribute – name. The name attribute identifies information you receive from a user and associates it with a value you specify.


TRY IT OUT!


The following exercises can be completed using any suitable text editor – for example, using Code View in Dreamweaver or Notepad++. We will be using Dreamweaver.


  1. Create a new folder in your MySites folder called Web Forms if this folder does not already exist.


  1. Define a new Dreamweaver site called Web Forms and set the root folder as the Web Forms folder which you have just created.


  1. Create a new HTML5 document and save the page as web-form.html.


A text box is used to collect a single line of data from the user – such as name, e-mail or address information. The text box is the most common form field.


  1. Using Code View in Dreamweaver or Notepad++, enter the following code to create a basic form with two text fields:


<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="Keywords" content="Web Form Example, Forms, Input Types"/>

<meta name="Description" content="Web Form Example"/>

<title>Basic Web Form</title>

</head>

<body>

<h1>Basic Web Form</h1>

<form method="post" action="http://ss1.ciwcertified.com/cgi-bin/process.pl">

Enter Your Name: <input type="text" name="Name" size="40"/>

<br />

<br />

Enter Your E-mail: <input type="text" name="Email" size="40"/>

<br/>

<br/>

<br/>

<input type="submit"/>

<input type="reset"/>

</form>

</body>

</html>


  1. Save the file as web_form.html and view the page in a range of browsers.


CREATING A SIMPLE WEB FORM IN HTML IN THIS




Internet Explorer 9







  1. Enter a name and an e-mail address and then click the Submit button. You should see the results of your input echoed back to you on a separate page.

CREATING A SIMPLE WEB FORM IN HTML IN THIS














CREATING A SIMPLE WEB FORM IN HTML IN THIS










Radio buttons are never used as stand-alone items. They are reserved for two or more mutually exclusive options. To ensure exclusivity, a group of radio buttons must share the same name attribute – although they will each use an individual value.


You will add some radio buttons to the web form. Radio buttons are a form field type familiar to most Web users. A default option may save your users time.


  1. Using Code View in Dreamweaver or Notepad++, add the following code to create radio buttons:


<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="Keywords" content="Web Form Example, Forms, Input Types"/>

<meta name="Description" content="Web Form Example"/>

<title>Basic Web Form</title>

</head>

<body>

<h1>Basic Web Form</h1>

<form method="post" action="http://ss1.ciwcertified.com/cgi-bin/process.pl">

Enter Your Name: <input type="text" name="Name" size="40"/>

<br />

<br />

Enter Your E-mail: <input type="text" name="Email" size="40"/>

<br/>

<br/>

Should we add you to our mailing list?<br/>

<input type="radio" name="AddToList" value="yes" checked="checked"/>Yes

<input type="radio" name="AddToList" value="no"/>No

<br/>

<br/>

<input type="submit"/>

<input type="reset"/>

</form>

</body>

</html>


  1. Save the file web_form.html and view the page in a range of browsers.


CREATING A SIMPLE WEB FORM IN HTML IN THIS











CREATING A SIMPLE WEB FORM IN HTML IN THIS










  1. Test the radio buttons by clicking on the No button, then clicking the Yes button. If you can select both simultaneously, you made an error in the name attribute. To work properly, these buttons must use the same name for their group.


  1. On clicking the Submit button, you should see “yes” or “no” returned for the value of the AddToList field.


Check boxes are used for a group of non-exclusive choices. You have various options when naming check boxes, and the option you choose depends on how you plan to use the collected data.




You will add some check boxes to the web form. Check boxes are a form field type familiar to most Web users.


  1. Using Code View in Dreamweaver or Notepad++, add the following code to create check boxes:


<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="Keywords" content="Web Form Example, Forms, Input Types"/>

<meta name="Description" content="Web Form Example"/>

<title>Basic Web Form</title>

</head>

<body>

<h1>Basic Web Form</h1>

<form method="post" action="http://ss1.ciwcertified.com/cgi-bin/process.pl">

Enter Your Name: <input type="text" name="Name" size="40"/>

<br />

<br />

Enter Your E-mail: <input type="text" name="Email" size="40"/>

<br />

<br />

Should we add you to our mailing list?<br/>

<input type="radio" name="AddToList" value="yes" checked="checked"/>Yes

<input type="radio" name="AddToList" value="no"/>No

<br />

<br />

What skills do you have that can help us at Habitat for Humanity? (check all that apply):<br />

<input type="checkbox" name="Carpentry"/> Carpentry<br />

<input type="checkbox" name="Plumbing"/> Plumbing<br />

<input type="checkbox" name="Financing"/> Financing<br />

<br />

<br />

<input type="submit"/>

<input type="reset"/>

</form>

</body>

</html>


  1. Save the file web_form.html and view the page in a range of browsers.


CREATING A SIMPLE WEB FORM IN HTML IN THIS




Firefox 19.0.2










CREATING A SIMPLE WEB FORM IN HTML IN THIS














  1. Edit your checkbox group code as shown below for more useful organisation of the returned information:


What skills do you have that can help us at Habitat for Humanity? (check all that apply):<br />

<input type="checkbox" name="Skills" value="Carpentry" /> Carpentry<br />

<input type="checkbox" name="Skills" value="Plumbing" /> Plumbing<br />

<input type="checkbox" name="Skills" value="Financing" /> Financing<br />

<br />

<br />


  1. Save the file web_form.html and view the page in a range of browsers.


CREATING A SIMPLE WEB FORM IN HTML IN THIS





Opera 12.14










CREATING A SIMPLE WEB FORM IN HTML IN THIS















Select lists are drop-down lists of predetermined options. Depending on the settings, these lists can allow single or multiple selections.


The value that is passed when the form is submitted is the text to the right of the <option> tag. However, if you want to pass a value different from the text that appears in the list, you can add the value= " " attribute into any or all of the <option> tags.




  1. Using Code View in Dreamweaver or Notepad++, add the following code to create a select list:


<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="Keywords" content="Web Form Example, Forms, Input Types"/>

<meta name="Description" content="Web Form Example"/>

<title>Basic Web Form</title>

</head>

<body>

<h1>Basic Web Form</h1>

<form method="post" action="http://ss1.ciwcertified.com/cgi-bin/process.pl">

Enter Your Name: <input type="text" name="Name" size="40"/>

<br />

<br />

Enter Your E-mail: <input type="text" name="Email" size="40"/>

<br />

<br />

Should we add you to our mailing list?<br/>

<input type="radio" name="AddToList" value="yes" checked="checked"/>Yes

<input type="radio" name="AddToList" value="no"/>No

<br />

<br />

What skills do you have that can help us at Habitat for Humanity? (check all that apply):<br />

<input type="checkbox" name="Skills" value="Carpentry" /> Carpentry<br />

<input type="checkbox" name="Skills" value="Plumbing" /> Plumbing<br />

<input type="checkbox" name="Skills" value="Financing" /> Financing<br />

<br />

<br />

How often would you like to receive an e-mail from Habitat for Humanity?

<br/>

<select name="EmailFreq">

<option>Once a week</option>

<option>Once or twice a month </option>

<option>Once a month </option>

<option value="Remove">Never </option>

</select>

<br/>

<br/>

<input type="submit"/>

<input type="reset"/>

</form>

</body>

</html>


  1. Save the file web_form.html and view the page in a range of browsers.

CREATING A SIMPLE WEB FORM IN HTML IN THIS





Safari 5.1.2














CREATING A SIMPLE WEB FORM IN HTML IN THIS













We will now add a multiple-option select list. Within the <select> tag, you can include the multiple attribute. The presence of this attribute automatically changes the select list to allow users to select more than one option. Because multiple selections are possible, these lists are usually presented with several, if not all, options exposed.


The size attribute of the <select> tag controls the number of items that will appear in a scrolling list box. If no size is specified, the number of items that will appear by default depends on the browser.


  1. Using Code View in Dreamweaver or Notepad++, add the following code to create a multiple-option select list:


<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="Keywords" content="Web Form Example, Forms, Input Types"/>

<meta name="Description" content="Web Form Example"/>

<title>Basic Web Form</title>

</head>

<body>

<h1>Basic Web Form</h1>

<form method="post" action="http://ss1.ciwcertified.com/cgi-bin/process.pl">

Enter Your Name: <input type="text" name="Name" size="40"/>

<br />

<br />

Enter Your E-mail: <input type="text" name="Email" size="40"/>

<br />

<br />

Should we add you to our mailing list?<br/>

<input type="radio" name="AddToList" value="yes" checked="checked"/>Yes

<input type="radio" name="AddToList" value="no"/>No

<br />

<br />

What skills do you have that can help us at Habitat for Humanity? (check all that apply):<br />

<input type="checkbox" name="Skills" value="Carpentry" /> Carpentry<br />

<input type="checkbox" name="Skills" value="Plumbing" /> Plumbing<br />

<input type="checkbox" name="Skills" value="Financing" /> Financing<br />

<br />

<br />

How often would you like to receive an e-mail from Habitat for Humanity?

<br/>

<select name="EmailFreq">

<option>Once a week</option>

<option>Once or twice a month </option>

<option>Once a month </option>

<option value="Remove">Never </option>

</select>

<br/>

<br/>

Where would you like to work? (choose all that apply):

<br/>

<select name="work" multiple="multiple" size="4">

<option>Australia</option>

<option>Japan</option>

<option>India</option>

<option>England</option>

<option>United States</option>

</select>

<br/>

<br/>

<input type="submit"/>

<input type="reset"/>

</form>

</body>

</html>


  1. Save the file web_form.html and view the page in a range of browsers.


For the multiple-option select list, hold down the CTRL key while clicking to select more than one option.

CREATING A SIMPLE WEB FORM IN HTML IN THIS







Google Chrome 26.0















CREATING A SIMPLE WEB FORM IN HTML IN THIS













We will now add a scrolling text area box. You can add a text area box to gather more than one line of text from a user. The <textarea> tag provides a scrolling text box into which a user can enter a few sentences, an address, feedback, comments or other text.


  1. Using Code View in Dreamweaver or Notepad++, add the following code to create a scrolling text area box:





<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="Keywords" content="Web Form Example, Forms, Input Types"/>

<meta name="Description" content="Web Form Example"/>

<title>Basic Web Form</title>

</head>

<body>

<h1>Basic Web Form</h1>

<form method="post" action="http://ss1.ciwcertified.com/cgi-bin/process.pl">

Enter Your Name: <input type="text" name="Name" size="40"/>

<br />

<br />

Enter Your E-mail: <input type="text" name="Email" size="40"/>

<br />

<br />

Should we add you to our mailing list?<br/>

<input type="radio" name="AddToList" value="yes" checked="checked"/>Yes

<input type="radio" name="AddToList" value="no"/>No

<br />

<br />

What skills do you have that can help us at Habitat for Humanity? (check all that apply):<br />

<input type="checkbox" name="Skills" value="Carpentry" /> Carpentry<br />

<input type="checkbox" name="Skills" value="Plumbing" /> Plumbing<br />

<input type="checkbox" name="Skills" value="Financing" /> Financing<br />

<br />

<br />

How often would you like to receive an e-mail from Habitat for Humanity?

<br/>

<select name="EmailFreq">

<option>Once a week</option>

<option>Once or twice a month </option>

<option>Once a month </option>

<option value="Remove">Never </option>

</select>

<br/>

<br/>

Where would you like to work? (choose all that apply):

<br/>

<select name="work" multiple="multiple" size="4">

<option>Australia</option>

<option>Japan</option>

<option>India</option>

<option>England</option>

<option>United States</option>

</select>

<br/>

<br/>

Comments:<br/>

<textarea name="comments" cols="30" rows="3">

Enter additional skills here.

</textarea>

<br/>

<br/>

<input type="submit"/>

<input type="reset"/>

</form>

</body>

</html>


  1. Save the file web_form.html and view the page in a range of browsers.

















CREATING A SIMPLE WEB FORM IN HTML IN THIS







Internet Explorer 9












CREATING A SIMPLE WEB FORM IN HTML IN THIS

448916.doc Version 1

Page 15 of 15


A GUIDE TO CREATING AN ENERGY BOOSTING SMOOTHIE A
A GUIDE TO CREATING TEXT DEPENDENT AND SPECIFIC QUESTIONS
ADAPTED FROM CREATING THE THOUGHTFUL CLASSROOM BY ANN J


Tags: creating a, creating, simple