HELP! I’m up to my ears in HTML & CSS
Anatomy of a Form
One of the interesting things we studied this week is the HTML Elements that make up a form and the ways to style a form with CSS
<form> Is a block level element that can contain other block level elements such as <p>.
Here’s how it works—It holds the other form elements that make up the form (that create controls in the browser) and it tells the browser where to send the form data when you submit the data (it also tells the browser what method it should use to send the data).
<input> plays many roles in the mark-up. Text <input> element is for entering text, combined with the optional attributes let you set specs for multiple lines of text.
Another is submit <input> creates a button that allows you to submit the form.
And radio <input> creates a single control with several buttons, only one of which can be selected at any time.
Checkbox <input> creates a checkbox control that can be either checked or unchecked. You can use multiple checkboxes together, you can check as many or as few as you like.
The <textarea> element creates a multi-line text area that you can type into.
If you type more than the specified area can show a scroll bar appeares (how cool is that!).
<select> element creates a menu control in web pages. the menu provides a way choose between a set of choices. The <select> and <option> elements work together to create a menu.
To create a menu you use the <option> element with the <select> element for each menu item.
The <select> element contains the list of options, each of which becomes a choice. Also associated with each choice is a “value” when the form is submitted, the value of the chosen menu option is sent to the server.
One you know what is going into your form and your html is complete you need the <action> attribute to make it all happen <form action=“http://url”.php>.
The browser will package up your data and send it to the URL specified in the action attribute.
How forms work
A <form> is basically a Web page with input fields that allow you to enter information. When the form is submitted the information is packages up and sent off to a Web server to be processed by a Web application. When the processing is complete you get another Web page as a response.
There are two primary methods the browser uses to get your form data to the server—post and get.
Post packages form data and sends it as part of a request (behind the scenes) to the server and get does the same with the addition of appending the URL by adding the info on to it before sending it to the server. Essentially the post method request is invisible and should be used for private data. And get requests are things that can be bookmarked (added information to your URL, can be seen in your browser address URL).
- Don’t forget to <link> the form in the <head> of your HTML document.
Other elements that could be used in forms
Fieldsets and Legeneds can be used to group together common elements, These two elements work together.
Fieldset surrounds a group of input elements and Legend gives them a label.
<label> element provides further information about the structure of your HTML document and allows for eaststyling of your css. It can also help screen readers for the visually impaired.
Password <input> is useful for forms that require a password or sensitive information.
File <input> if you need to send an entire file to a Web application you use <input> set to “file” and when the form is submitted the contents of the entire folder are submitted with it. This method works only with post.
Multiple selection can be used to turn a single choice menu into a multiple choice menu.