Add a Contact Form
Unfortunately, this graduate student of Dr. Boople’s, Joseph “Highway” Rhobberee, isn’t as interested in helping humanity—or even zombianity—as he is in making a fast buck. While most people would have a contact form asking for name, email, comment, and so on, he wants more information: net worth, whether they’ve won an email lottery, and where they fall on the Gull & Bill Credulity Scale.
Before we set up these fields, we need to talk about the <form> element. The <form> element wraps all the form fields, sets where the information goes when you submit it, and sets how the information is sent there. HTML is a structural and presentation language. It doesn’t have a way to process information (e.g., manipulate data, send email, save to a database, etc.), but it can take the content from the form and send it to a URL.
The action attribute tells the browser where to send the form. We’re going to send the form data to https://johnrhea.com/undead-form-practice.php. This is a script that regurgitates what you send it (like a zombie you fed gummy brains to).
We’ll also add a method attribute that tells the browser how to send the information. Method can be set to either get or post. Get puts the form data in the URL, which is great for bookmarking (e.g., a search term), but it has a three-thousand-character limit, and someone looking over your shoulder can see it.
Post sends the form data in the body of the HTTP request. There’s no character limit, and no one looking over your shoulder can see it. This is only a small amount of security, though, as anyone could intercept the packet on the network and read it. They just can’t do it without special knowledge and know-how. We’ll use the post method. Adding both the action and method attributes, place the below just after the paragraph element:
<form action="https://johnrhea.com/undead-form-practice.php" method="post"></form> Let’s add a regular text input for the person’s name. <input> is a void tag/self-closing tag, so it does not need a closing tag. The default input type is text, and that works just fine for a person’s name.
<input type="text">One attribute that’s important to include is a name attribute. When the form is submitted, the name attribute will be paired with the value of the field. So, if I have this input:
<input type="text" name="humanname">and I put Dawn Ofthedead into the name field, it will be sent to the server as a variable called humanname with a value of “Dawn Ofthedead”—that is, humanname = “Dawn Ofthedead”.
To make the field more accessible and to make it clear what we want the field to hold, we’ll add a label element. We could just show it by adding some text near the input. However, while that might work for sighted visitors, if we cannot see or understand the visual grouping, there’s no definitive way to know whether the text that’s next to an input in the code directly relates to an input or not. Even if it’s right 95 percent of the time, that’s not good enough for someone who has to fill out an important form online.
There are two ways to associate a label element with a form field. First, you put the input inside the label:
<label>Name: <input type="text" name="humanname"></label>Easy enough, but we cannot always be certain that form fields and labels will be together in the code. To connect them without nesting, we add an id attribute to the input, and then add a for attribute to the label, making the value of the for attribute the id of the input. Voilà! They’re connected.
<label for="hname">Name: </label>
<input type="text" id="hname" name="humanname">While either method works, nesting the field inside the label is best when possible, as there’s no room to forget or delete the for attribute.
Go ahead and place this field and label within your form element. While I like the nested approach, use whichever you prefer.
Somewhat related, label and input are both inline elements, so they’ll stay in one long line of text if we let them. If the label surrounds the input, we can set the label to display: block; and then each field and its label will be on their own line.
label {
display: block;
}Go ahead and add the above CSS to your CSS file; where you place it doesn’t matter as long as it’s not within another rule.
Next, let’s request the visitor’s email.
To be continued in Expand Your First Website: Thwacking Zombies With HTML & CSS Again.
