The <Form> Element
Forms:
In HTML the <form> </form> element is used to have data that is imput into a webpage that will be passed along to the server. One of the most common <form> elements used is the <input> element. This input element has many useful features and can be multiple things. Some of the input methods can be a checkbox, text field, radio button, submit button, password, and more. We will look at several types of <input> elements below.
Input Elements:
The text element is used extensively in HTML forms. As the name suggests, this element will allow us to enter text into a text field. The HTML code for a text element will look something like this:
<form>
Enter Your First Name: <input type="text" name="firstname">
Enter Your Last Name: <input type="text" name="lastname">
</form>
On a webpage the above code will be viewed like this:
Please note that while you do not need to close the input element, you must close the <form> </form> element to complete a section. If you do not, your form may not work properly.
Another input element we can use is a radio button. When you use a radio button you can only select one of a number of choices. The HTML for a radio button will look something like this:
<form>
Do you like this tutorial? <br>
<input type="radio" name="DoYouLike" value="yes">Yes, I do!<br>
<input type="radio" name="DoYouLike" value="no">No, I do not!<br>
</form>
For the code above we will designate a radio button and give it a name variable of “DoYouLike”. We will then offer the user two choices for this element, and those choices are “yes” or “no”. The <form> element will then pass the value of the radio choice of the "DoYouLike" variable along to the server.
On a webpage the above code will be viewed like this:
Another input method that is used extensively is the “Submit” button. This will take the text that is entered or other forma information that is entered and formally submit it to the server for processing. The HTML for a simple Submit button (which will not pass any information along to the server at this point) will look something like this:
<form>
<input type="submit" value="SubmitButton">
</form>
In practical usage, this Submit button code will contain other instructions, like a .php script to run when the button is pressed. For now we will not have it activate anything. On a webpage the above code will be viewed like this: