A form is simply an area that can contain form fields.
Form fields are objects that allow the visitor to enter information – for example text boxes, drop-down menus or radio buttons.
When the visitor clicks a submit button, the content of the form is usually sent to a program that runs on the server. However, there are exceptions.
The HTML of a form consists of a form tag enclosing tags for various form controls, including text entry fields, various buttons, a file selection control, and menus. (You are probably familiar with all of these from pages you have visited.) The user types in the text fields, clicks on the buttons and selects items from the menus. Finally, the user submits the form, usually by clicking on a special submit button.
*openging <form> and closeing </form> tag.
List of <form> tag’s attributes | |
---|---|
method | Sends the information out mainly used for posting purposes. |
action | Giving the form a direction of where to go. It can be an email, a html-page (on your or another site), a PHP or ASP Script etc. |
name | Giving the form a name, requires for work with the form from scripts. |
enctype | This item is mainly used when performing the mailto action. It determines the type of email to send. It can send it in the format of a text/plain style. It’s optional attribute. |
target | Name of window of frame where result of form data processing will be loaded. May have a values:_blank – new page will be loaded in new window._self – new page will be loaded in current window (default value). |
<form method="post" action="mailto:someone@someone.com"></form>
This example above is the minimum and just using the mailto part as if you are sending an email. It can be used in other ways like for search engines or you can have it within the form send out an email directly to whomever you wish to have it sent off to. Look below and I will show you a brief sample as far as how it will work using PHP as part of the tool and then one with CGI. Keep in mind the urls are not real so do not look for them.
<form method="post" action="www.fastlearning.in" name="newform" target="_blank"> Form Data here </form>
There are different types of form controls that you can use to collect data using HTML form:
You can put in a single line of words into this. Mainly the input style is needed. Believe it or not, outside of the <form> tag, this is probably one of the most important aspects of it.
<input type="text" name="text2" size="50" value="Enter Name"> <input type="text" name="text2" maxlength="10" size="30" placeholder="Enter Name">
This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password.
<input type="password" name="password"> <input type="password" maxlength="5" name="password" size="10">
The main purpose of the <textarea tag is to create a window that can be adjusted. It can be adjusted by not height and width. This tag is really not overly complex to figure out and there really isn’t a lot to say about it. This in my honest opinion is one of the easiest items to learn as far as creating forms go.
List of <textarea> tag attributes | |
---|---|
Textarea | Basic tag needed for this format. Close tag is needed. |
name | Used for the header of the form. |
cols | Mainly used for width purposes. Width in symbols. |
rows | Mainly used for height purposes. Height in symbols. |
readonly | Text area can not change by user. |
<form> message <textarea name="message" cols="30" rows="5" > Hello World ! </textarea> <form>
Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.
OR
The checkbox mainly is used for selecting multiple options at one time. It’s used in surveys online and can be used for any type of form. If you have interests of course, fill free to make them and have them filled out.
List of <input type="checkbox"> tag’s attributes | |
---|---|
type="checkbox" | Determines the type of <input> element. |
name | Gives checkbox a name. |
value | Set a value of a checkbox. |
checked | Activate a checkbox. |
disabled | Disable a checkbox |
<input type="checkbox" name="sports" value="fl"> FL <input type="checkbox" name="sports" value="ac"> AC
FL AC
<input type="checkbox" name="check" value="Checkbox 1"> Just the checkbox <input type="checkbox" name="check" value="Activated Checkbox" checked> The activated checkbox <input type="checkbox" name="check" value="Disabled checkbox" disabled> The disabled checkbox <input type="checkbox" name="check" value="Checkbox 1" checked disabled> The activated and disabled checkbox
Just the checkbox The activated checkbox The disabled checkbox The activated and disabled checkbox
Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.
List of <input type="radio"> tag’s attributes | |
---|---|
type="radio" | Determines the type of <input> element. |
name | Gives radio a name. |
value | Set a value of a radio. |
checked | Activate a radio. |
disabled | Disable a radio |
<input type="radio" name="india" value="1958"> 1958 <input type="radio" name="india" value="1964"> 1964
1958 1964
<input type="radio" name="check" value="Activated radio" checked> The activated radio <input type="radio" name="check" value="Disabled radio" disabled> The disabled radio
The activated radio The disabled radio
This is the part of the form that you can invisible to the viewer but not to you. By that mean, you have that coded in and isn’t visible to the browser at all. This one requires every item used. All the attributes are used and can be useful depending on the purpose you have exactly.
AttributeFor this purpose, I will show you the hidden value in all of the <input> tags. Much like in all tutorials using the <input>, it has no end tag.
<input type="hidden" name="admin" value="2">Hidden
Hidden
If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.
Attribute | Description |
---|---|
name | Used to give a name to the control which is sent to the server to be recognized and get the value. |
accept | Specifies the types of files that the server accepts. |
<input type="file" name="fileupload" accept="image/*">
A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more options.
AttributesFollowing is the list of important attributes of <select> tag:
Attribute | Description |
---|---|
name | Used to give a name to the control which is sent to the server to be recognized and get the value. |
size | This can be used to present a scrolling list box. |
multiple | If set to "multiple" then allows a user to select multiple items from the menu. |
Following is the list of important attributes of <option> tag:
Attribute | Description |
---|---|
value | The value that will be used if an option in the select box box is selected. |
selected | Specifies that this option should be the initially selected value when the page loads. |
label | An alternative way of labeling options |
<select name=”Intro”> <option>HTML</option> <option>CSS</option> <option>JAVASCRIPT</option> </select>Output List with multiple selection
<select name=”Intro” multiple> <option>HTML</option> <option>CSS</option> <option>JAVA</option> <option>JAVASCRIPT</option> <option>VISUAL BASIC</option> </select>Output
There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button. The type attribute can take the following values:
Type | Description |
---|---|
submit | This creates a button that automatically submits a form. |
reset | This creates a button that automatically resets form controls to their initial values. |
button | This creates a button that is used to trigger a client-side script when the user clicks that button. |
image | This creates a clickable button but we can use an image as background of the button. |
<form name="example" > <input type="button" name="ok" value="ok"> <input type="submit" name="submit" value="Submit" > <input type="reset" name="reset" value="Reset" > <input type="image" name="imagebutton" src="./../logo.png" > </form>