In this lecture, we created a web page with a simple form on it and looked at how web pages use forms to send data to scripts. But we didn't actually write the script that would have dealt with the data.
We created a web page called profile.html in the apache/htdocs/ directory. It was meant to be a profile submission page, but the form isn't going to do anything because we didn't write a script for it, just the html form.
We started with a page that looked something like this:
<html>
<head>
<title>Fake Profile Submission Page</title>
</head>
<body>
<h1>Fake Profile Submission Page</h1>
<p>Please fill out this profile.</p>
<form>
Name: <input type=text name=fullname><br>
</form>
</body>
</html>
First, let's talk about the non-form html tags that are new here. The <h1> tag indicates a first-level header. It's usually printed in a much larger font. The <p> tag indicates a paragraph of text. The <br> tag is used to insert a line break.
Now, we get to the form itself. The form is enclosed in <form> tags and consists of text that the user will see and <input> tags for various ways of getting input from the user. In this particular case, we've created a text input tag of type "text" and name "fullname". The "text" type creates a text box and whatever is typed into that box will be stored in a variable named fullname when the form is submitted. As we created it, the form would look like this:
Please fill out this profile.
Someone asked if there should be quotation marks around the words text and fullname. The answer is that the web page works either way. We switched to using quotation marks after that point.
At this point, someone asked about html comments, which was an excellent question. I didn't remember exactly what the syntax was for html comments, so we went to the references page and visited my favorite reference for html. We saw that html comments are written inside a tag that starts <!-- and ends -->. We added a comment and a few more items to the form. The code for our form now looked something like:
<form>
Name: <input type="text" name="fullname"><br>
<!-- This is a comment
that has more than one line
-->
Age: <input type="text" name="age"><br>
Gender:<br>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
<input type="radio" name="gender" value="other">Other<br>
<input type="radio" name="gender" value="nonegiven">Do not wish to say<br>
</form>
We wanted a numeric value for the "age" input, but the html form doesn't distinguish between different kinds of data, only between different ways of entering the data. Since we wanted the user to type in their age into a text box, we used the same "text" type as with the name.
We created a series of radio buttons (using the "radio" type) for selecting gender. Radio buttons are different from checkboxes in that you can only have one selected at a time. Note that the "value" ("male", "female", "other", or "nonegiven") doesn't appear on the web page itself; it's just the value that will be assigned to the variable gender when the form is submitted. We wanted the user to know which radio button stood for each option, so we had to include some text next to each button.
At this point, we saved the page and loaded it up in our web browser. It looked something like this:
Please fill out this profile.
Now I've been talking about "when the form is submitted", but I haven't said anything about how that happens. We needed to have a button that submits the form. The html for that button looked something like this:
<input type="submit" name="action" value="Submit">
The "submit" type creates a button that when pressed loads the appropriate page/script, including all the information the user has entered into the form. Since we didn't say what page/script to load, it loads the default page, which is the current page. Since there might be more than one submit button, it also assigns the value "Submit" to the variable "action". Note that the value "Submit" also appears as text on the button itself.
We saved and loaded the page, filled in some text and hit the submit button. This reloaded the page, but in addition to the normal URL, there was some extra information passed along after a question mark. The page it loaded was this:
http://silo.soic.indiana.edu:61300/profile.html?fullname=Erik+Wennstrom&age=35&gender=male&action=Submit
Our web page isn't a script, so nothing happens with all the information after the question mark, except that it's loaded in as the default options for the form. If this were a script, it would be able to use the variables fullname, age, gender, and action (respectively with the values "Erik+Wennstrom", "35", "male", and "Submit"). Note that each variable/value pair is separated by an ampersand (&).
At this point, we had a full form (that doesn't do anything), but we played around with a few more things. We shortened the length of the age box, and we looked at what it would look like if we changed the radio buttons to checkboxes. This is the code we ended with:
<html>
<head>
<title>Fake Profile Submission Page</title>
</head>
<body>
<h1>Fake Profile Submission Page</h1>
<p>Please fill out this profile.</p>
<form>
Name: <input type="text" name="fullname"><br>
<!-- This is a comment
that has more than one line
-->
Age: <input type="text" name="age" size=4><br>
Gender:<br>
<input type="checkbox" name="gender" value="male">Male<br>
<input type="checkbox" name="gender" value="female">Female<br>
<input type="checkbox" name="gender" value="other">Other<br>
<input type="checkbox" name="gender" value="nonegiven">Do not wish to say<br>
<input type="submit" name="action" value="Submit">
</form>
</body>
</html>
And this is what it looked like when we loaded it in our web browser:
Please fill out this profile.
I encouraged you to come up with your own idea for what kind of form you would be creating for homework #3. Don't just make a fake profile submission page like I did.
We introduced html forms and talked about what they did. We saw the following html tags for the first time:
form
input
type="text"
type="radio"
type="checkbox"
type="submit"
<~-- html comment -->