HTML Forms
Let me preface this by saying that I am not certain that a discussion on forms belongs in an HTML tutorial. Why would I say that?
Forms are a way of getting information and data from visitors to your Web page. But all the magic of forms happens on the back end. While HTML may put the form on a Web page, it does not do anything to handle the data supplied by clients. All of that is taken care of by a back end script running on the server, like PHP. And then the data may be stored in a database, like SQL.
That said, let's do this anyways. Here is an example of a form.
You can try out this form if you want. I am not doing anything too impressive with the data. It is just set to fire off to an email address. Although, it might be kind of nice to see who all is reading this, and I could punish you by blasting spam back at you.
Now let's take a look at the HTML code that made this form, and I will go through it bit by bit with you.
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
</head>
<body>
<form action="mailto:gamecodeplus13@gmail.com?subject=Form_Response" method="post" enctype="text/plain">
<label>Name: <input type="text" id="name" name="name"></label>
<p>How do you feel about this tutorial?</p>
<label><input type="radio" id="love" name="tutorial_rating" value="love" checked> Love it.</label><br>
<label><input type="radio" id="okay" name="tutorial_rating" value="okay"> It's okay.</label><br>
<label><input type="radio" id="hate" name="tutorial_rating" value="hate"> Hate it.</label><br>
<p>Check all the tutorials you would like to read about.</p>
<label><input type="checkbox" id="HTML5" name="new_tutorial" value="HTML5_Games"> HTML5 Games</label><br>
<label><input type="checkbox" id="Game_Eng" name="new_tutorial" value="Game_Engines"> Game Engines</label><br>
<label><input type="checkbox" id="Graphics" name="new_tutorial" value="Graphics"> Graphics and Animation</label><br><br>
<label>Favorite Game Dev. Subject:
<select id="fave" name="fave_subject">
<option value="design">Design</option>
<option value="programming">Programming</option>
<option value="art_graphics">Art and Graphics</option>
<option value="music_sound">Music and Sound</option></select></label><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<!DOCTYPE html><html><head><title>My Form</title></head><body><form></form></body></html>
<form action="mailto:gamecodeplus13@gmail.com?subject=Form_Response" method="post" enctype="text/plain"></form>
The action attribute contains where to send the form data when it is submitted. In my example, I have it set to mailto:, meaning email to, gamecodeplus13@gmail.com, an email address. The ?subject=Form_Response, just means that the subject of the email will be called "Form_Response".
The method attribute, refers to which type of HTTP method to use. There are two possibilities, "get" or "post". Since the "post" method works with the email action target, that is the one I used. If you were sending the data to a PHP script, you could use "get" and have it pull together a Web page response with the data appearing in the URL for bookmarking.
The enctype attribute only has meaning if the method attribute is set to post. It controls how the form data should be encoded. In my example, I have it set to the least possible secure setting. Well, I am not exactly dealing with sensitive personal information here, so it is okay.
Now that we have our <form> element, we need some <input> elements. Let's start at the top.
<form action="mailto:gamecodeplus13@gmail.com?subject=Form_Response" method="post" enctype="text/plain">
Name: <input type="text" id="name" name="name">
</form>
In my example, I nested the first <input> inside a <label> element.
<form action="mailto:gamecodeplus13@gmail.com?subject=Form_Response" method="post" enctype="text/plain">
<label>Name: <input type="text" id="name" name="name"></label>
</form>
What does the <label> element do? Let's say you are viewing the form on a small screen phone. You want to start filling out the form, but the text box is small. It might be hard for you to hit the small target. The <label> element is meant to be used with an <input> element. It expands the tap target to include any text with the <input> element. Now if you click or tap on the nearby text "Name:", you gain access to the text box.
The next type of input I used is called a radio input.
<p>How do you feel about this tutorial?</p>
<label><input type="radio" id="love" name="tutorial_rating" value="love" checked> Love it.</label><br>
<label><input type="radio" id="okay" name="tutorial_rating" value="okay"> It's okay.</label><br>
<label><input type="radio" id="hate" name="tutorial_rating" value="hate"> Hate it.</label><br>
The radio input gives you options but you can only select one. The value attribute is the data that gets sent with the form. So if you choose "It's okay", the result sent is "tutorial_rating=okay". Notice that the first radio input has an attribute called checked. It means that I have selected the first option for you already. I did this for the convenience of anyone submitting the form, since everyone would select the first option anyways. And again, I nested each <input> element inside a <label>.
Next comes the checkbox input.
<p>Check all the tutorials you would like to read about.</p>
<label><input type="checkbox" id="HTML5" name="new_tutorial" value="HTML5_Games"> HTML5 Games</label><br>
<label><input type="checkbox" id="Game_Eng" name="new_tutorial" value="Game_Engines"> Game Engines</label><br>
<label><input type="checkbox" id="Graphics" name="new_tutorial" value="Graphics"> Graphics and Animation</label><br><br>
The checkbox inputs are similar to the radio inputs except you can check as many as you would like.
The <select> element creates a dropdown menu to choose from.
<label>Favorite Game Dev. Subject:
<select id="fave" name="fave_subject">
</select></label><br>
But a dropdown menu needs options, so we nest <option> elements.
<label>Favorite Game Dev. Subject:
<select id="fave" name="fave_subject">
<option value="design">Design</option>
<option value="programming">Programming</option>
<option value="art_graphics">Art and Graphics</option>
<option value="music_sound">Music and Sound</option></select></label><br>
The last thing we add to our form is a submit button.
<input type="submit" value="Submit">
There are other possible form elements available for use, but this is enough for this tutorial.
Next, we will learn about the <canvas> element.
Next Topic: The Canvas Element
Comments
Post a Comment