Today we'll be creating HTML forms. None of these will "work" in any way, but you will at least learn how to use them, so that in the future, you can use forms when appropriate.
To create a form, the form contents must be wrapped within a <form> tag. A single web page can have multiple forms in it. In this case, each form must be wrapped in a separate form tag. Let's start a form: below the first-level header (<h1>), type in:
<form action="action_1.php" method="post"> </form>
What does this do? First, it opens a form tag. The form tag groups all the items within a particular form into a single group of items which, when the form is submitted, will all be read and processed together. Any items not within this form tag, will not be processed if and when this form is submitted. Thus, you can functionally isolate multiple forms in a single HTML page, and control which items belong to which form, and thus which items get submitted together.
Second, the action attribute tells the computer what file to send the data to, that is collected by the form when the form is submitted. This file is typically a CGI (common gateway interface) script of some sort, otherwise the form data is unused. Typical cgi scripting languages include PHP (*.php), Perl (*.pl), ASP (*.asp), etc. Creating these kinds of files goes beyond the scope of this class, and typically requires programming knowledge. For the purposes of this lab, I have written a very simple php file that can do something with the data we submit in our forms. The action attribute is required!
Third, the method attribute tells the browser what method to use in order to transmit form data. The method attribute is not required, but the method attribute is always set, whether or not you specify it, so I suggest you get in the habit of explicitly declaring a method so you start making conscious choices regarding which method to use. The default method attribute value is "get". However, if you are sending data back and forth, it is probably a good idea to use "post". The "get" method puts the variables and their values in the URL for the target page, in the form:
.../action_1.php?name="bob"&age="12"
The post method sends data in the body of the request. This is more secure, as people can't use URL hacking to try to manipulate your scripts in unexpected or unwanted ways. Sometimes, however, you want to enable URL hacking, or to enable bookmarking of specific pages which are generated by scripts but the only uniqueness in their URL is via get variable values. There are also character limits for the get method. Therefore, if you are conveying a lot of information (e.g., sentences, paragraphs, etc. of text), a post request is more appropriate. For more information about when to choose which method, see:
Forms can be more complicated even than tables or hierarchies of lists. Therefore, please practice good indentation habits. Now let's create our first form items, some text boxes. Inside the <form> tag, type in the following:
<fieldset>
<div class="sample-form-item"><label>Name: <input type="text" name="name" /></label></div>
<div class="sample-form-item"><label>Age: <input type="text" name="age" maxlength="5" /></label></div>
<div class="sample-form-item"><label>Species: <input type="text" name="species" disabled="disabled" value="Human" /></label></div>
</fieldset>
What did we do here? First, we used the <input> tag to create text boxes. Text boxes are just one kind of input field that the <input> tag can be used to create. By setting the type attribute to the value "text", we specified that the input element was to create a text box. The name attribute is the variable name to which the input is assigned. Thus, in the first line, whatever gets typed into the first text box will be assigned to the variable "name", and what gets typed into the second text box will be assigned to the variable "age".
In the second line, we created an input text box which has the additional attribute maxlength. The maxlength attribute limits the number of characters the user can type into the text box, and it is an attribute which should be used sparingly (and is probably not appropriately used here). Misuse of the maxlength attribute creates web forms which are really annoying to fill out, and will frustrate the users of your website. The most common example of this is a person who has a long name, say "Sanjay Krishnan-Visweswaran", but the name field has a character limit of 20 characters, thus the name can only be entered as "Sanjay Krishnan-Visw".
In the third line, we added a couple different attributes. First, we disabled the text box so that the user cannot click on it or select it. Instead of using disabled, we could have made it readonly, which would have allowed the user to click on the text box and select any text which appeared therein, but not change the text—readonly is an attribute that can only be applied to text boxes. Second, we primed the text box with information by setting the value attribute. Thus, by default, the text box is filled with the text "Human". The disabled, readonly, and value attributes can be used entirely independent of one another. Thus, by only setting the value attribute you can set a default value for the form field that still can be changed by the user—this functions simply as a suggested starting value. Finally, if an <input> tag is disabled, then whatever value it holds will not be sent to the CGI script.
Second, we wrapped each input field and its associated text in a <label> tag. This connects the text to the input field, and when the page is rendered, you will be able to click on the associated text in order to select the box. Third, we wrapped the entire line within a div (for styling purposes). And finally, we wrapped the entire group within a <fieldset> tag, in order to group them together as a related set of fields.
Now let's create some radio buttons:
<div class="sample-form-item">
<input type="radio" name="sex" id="female" value="f" />
<label for="female">Female</label>
</div>
<div class="sample-form-item">
<input type="radio" name="sex" id="male" value="m" />
<label for="male">Male</label>
</div>
<div class="sample-form-item">
<input type="radio" name="sex" id="other" value="o" />
<label for="other">Other</label>
</div>
Notice, we use the <input> tag again, but this time, the type attribute is given the value "radio". Also, notice how the labels are done differently. In this case, the labels do not encompass the <input> tag, but are associated with it via the <input> tag's id attribute. The <label> tag's for attribute must have the same value as an id attribute for an <input> tag. Notice, also, that all the radio inputs have the same name. This is because only one can be selected, and therefore, whichever is selected will set the value of its value attribute to the variable name in the name attribute (i.e., the variable "sex" will be set to either "f", "m", or "o").
Now let's add some check boxes:
<div class="sample-form-item">
<p>What are some of your interests?</p>
<label>
<input type="checkbox" name="interest[]" id="html" value="html" checked="checked" />
HTML
</label>
<label>
<input type="checkbox" name="interest[]" id="swim" value="swimming" />
Swimming
</label>
</div>
Here we have used the input tag with the type attribute set to "checkbox". How you handle the name attribute with check boxes depends on how you have written the script that will process the data that gets submitted. For the purposes of this lab, just copy what I have written here. There are other ways of handling this. Notice, that there is the optional attribute checked which you can use to have a checkbox start out as checked.
Now let's add a large text box, known as a text area:
<div class="sample-form-item">
<label>
Bio page:
<textarea rows="5" cols="40" name="bio">
Write your bio here
</textarea>
</label>
</div>
This one's fairly simple and straightforward. You have to define the size of the text box (rows and cols are mandatory attributes). The name attribute is optional, but you need it if you are going to submit the data to a CGI script.
Now let's add a dropdown menu:
<div class="sample-form-item">
<p><label for="drop-menu">Pick your favorite part of class:</label></p>
<select name="fave">
<optgroup label="Background Topics">
<option value ="how the internet works">How the Internet works</option>
</optgroup>
<optgroup label="Core Topics">
<option value ="HTML" selected="selected">HTML</option>
<option value ="CSS">CSS</option>
</optgroup>
<optgroup label="Other">
<option value ="other stuff">Other stuff</option>
</optgroup>
</select>
</div>
This one's a bit more complex. The <select> tag forms the container for the dropdown menu. The attribute name has the same function as always.
The <optgroup> tag allows you to group options together, which is especially useful for long lists (this is not a long list, so it's a bit superflouous). The label attribute is the title under which the member options are grouped.
The <option> tag are the actual options which can be selected. The value attribute is the value which is returned when the submit button is clicked (assigned to the variable specified by the name attribute of the <select> tag). And the selected attribute allows you to specify which option ought to start out selected. If the selected attribute is unspecified, most browsers default to selecting the top item in the list.
Finally, let's add a submit button:
<div class="sample-form-item">
<input type="submit" value="Send Information" />
</div>
Notice, we're back to the <input> tag, the type attribute's value is now "submit", and the value attribute's value is the text which will appear on the button which the user can click. When the user clicks this button, all the variables which have been set to have a value (usually by the user clicking or typing in information) will be sent to the CGI script, and whatever dynamic processing is setup will occur.
The rendering of your form should look something like this:
To turn in your assignment, please upload it to your GSLIS I: drive. The php script will not work on Netfiles, so please do not upload it there.
Out of 25 points total.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.