HTML Form

HTML/HTML Form

HTML Form

HTML Form is used to create user input.

There are several types of form controls that you can use to collect information from visitors to your website.

Adding Text:

Text input (text box): It used for a single line of text such as usernames.

<input> The input element is used to create several different form controls. The value of the type attribute determines what kind of input they will be creating.

type="text" When the type attribute has a value of text, it creates a singleline text input.

name When users enter information into a form, the server needs to know which form control each piece of data was entered into.(Example, in a register form, the server needs to know what has been entered as the name and other information.

Example:

<input type="text" name="username"/>

Result:

Password input: Like a single line text box but it masks the characters enter in the text field.

type="password" When the type attribute has a value of password it creates a text box that acts just like a single-line text input, except the characters are blocked out. They are hidden in this way so that if someone is looking over the user's shoulder, they cannot see sensitive data such as passwords.

name: The name attribute indicates the name of the password input, which is sent to the server with the password the user enters.

<input type="password" name="username"/> 

Result:

Although the password is hidden on the screen, this does not mean that the data in a password control is sent securely to the server. You should never use these for sending sensitive data such as credit card numbers.

Text area (multi-line): For longer areas of text, such as messages and feedback.

The <textarea> element is used to create a multi-line text input. Unlike other input elements this is not an empty element. It should therefore have an opening and a closing tag.

Any text that appears between the opening <textarea> and closing textarea> tags will appear in the text box when the page loads.

<textarea> textarea>

Result:

Making Choices:

Radio buttons: For use when a user must select one of a number of options.

type="radio" Radio buttons allow users to pick just one of a number of options.

name: The name attribute is sent to the server with the value of the option the user selects. When a question provides users with options for answers in the form of radio buttons, the value of the name attribute should be the same for all of the radio buttons used to answer there question.

value: The value attribute indicates the value that is sent to the server for the selected option. The value of each of the buttons in a group should be different (so that the server knows which option the user has selected).

<label for="name">Name:label>
<input type="text" name="name">
<input type="radio" name="mohammed" value="mohammed"/>Mohammed
<input type="radio" name="Abdullah" value="abdellah"/>Abdullah

Result:

Once a radio button has been selected it cannot be deselected. The user can only select a different option. If you are only allowing the user one option and want them to be able to deselect it (for example if they are indicating they agree to terms and conditions), you should use a checkbox instead.

Checkboxes When a user can select and unselected one or more options.

type="checkbox" Checkboxes allow users to select or unselect one or more options in the given lists options.

name: The name attribute is sent to the server with the value of the option(s) the user selects. When a question provides users with options for answers in the form of checkboxes, the value of the name attribute should be the same for all of the buttons that answer that question.

value: The value attribute indicates the value sent to the server if this checkbox is checked.

<input type="checkbox" value="check1" name="check1"/> <br/>
<input type="checkbox" value="check2" name="check2"/> <br/>
<input type="checkbox"  value="check3" name="check3"/>

Result:

Drop-down boxes When a user must pick one of a number of options from a list.

A drop down list box also known as a select box allows users to select one option from a drop down list.

The <select > element is used to create a drop down list box. It contains two or more <option> elements.

The <option> element is used to specify the options that the user can select from. The words between the opening <option> and closing </option> tags will be shown to the user in the drop down box.

The selected attribute can be used to indicate the option that should be selected when the page loads. The value of this attribute should be selected.

If this attribute is not used, the first option will be shown when the page loads. If the user does not select an option, then the first item will be sent to the server as the value for this control.

The function of the drop down list box is similar to that of the radio buttons in that only one option can be selected. There are two key factors in choosing which to use:

1. If users need to see all options at a glance, radio buttons are better suited.

2. If there is a very long list of options like list of family member drop down list boxes work better.

<select name="country_name">
    <option> USA </option>
    <option> Canada </option>
    <option> Italy </option>
</select >

Result:

Submitting Forms:

Submit buttons To submit data from your form to another web page

type="submit" The submit button is used to send a form to the server.

The value attribute is used to control the text that appears on a button. It is a good idea to specify the words you want to appear on a button because the default value of buttons on some

browsers is ‘Submit query’ and this might not be appropriate for all kinds of form.

<label> Submit >
<input type="submit" name="save" value="save" />

Result:

Image buttons Similar to submit buttons but they allow you to use an image

Uploading files:

File upload Allows users to upload files (e.g. images) to a website.

<input> If you want to allow users to upload a file like image, video, mp3, or a PDF, you will need to use a file input box.

type="file" This type of input creates a box that looks like a text input followed by a browse button. When the user clicks on the browse button, a window opens up that allows them to select a file from their computer to be uploaded to the website.

When you are upload files, the method attribute on the element must have a value of post. You can not send files using the HTTP get method.

<label>File label>
<input type="file" name="image"/>

Result:

Button & hidden Controls

The <button> element was introduced to allow users more control over how their buttons appear, and to allow other elements to appear inside the button.

This means that you can combine text and images between the opening <button> tag and closing </button> tag.
type="hidden" This example also shows a hidden form control. These form controls are not shown on the page although you can see them if you use the View Source option in the browser.

Labelling Form Controls

When introducing form controls, the code was kept simple by indicating the purpose of each one in text next to it. However, each form control should have its own <label> element as this makes the form accessible to vision-impaired users.

The <label> element can be used in two ways. It can:
1. Wrap around both the text description and the form input (as shown on the first line of the example to your right).
2. Be kept separate from the form control and use the for attribute to indicate which form control it is a label for (as shown with the radio buttons).

 <label for="name">Name</label>

Grouping Form Elements

You can group related form controls together inside the <fieldset>element. This is particularly helpful for longer forms.

Most browsers will show the<fieldset> with a line around the edge to show how they are related. The appearance of these lines can be adjusted using CSS.

<legend>: The <legend> element can come directly after the opening <fieldset> tag and contains a caption which helps identify the purpose of that group of form controls.

<fieldset>
            <legend>Contact Information</legend>
            <label>Email:<br />
            <input type="text" name="email" /></label><br />
            <label>Mobile:<br />
            <input type="text" name="mobile" /></label><br />
</fieldset>

Result:

Form Structure

HTML form may have several form controls, each gathering different information. The server needs to new which piece of inputted data corresponds with which from element.

controls live inside element.This element should always carry the action attribute and will usually have a method attribute too.

action="index.php" Every element requires an action attribute. Its value is the URL for the page on the server that will receive the information in the form when it is submitted

method Forms can be sent using one of two methods: GET or POST.

With the GET method, the values from the form are added to the end of the URL specified in the action attribute. The best is for the get method:

short forms (such as search boxes)
when you are just retrieving data from the web server it not sending information that should be added or deleted from a database

With the POST method, the values are sent are known as HTTP headers. As a rule of thumb you should use the post method if your form:

allows user to upload a file.
is very long.
contains sensitive data like passwords.
adds or deletes information from a database.
If the method attribute is not used, the form data will be sent using the get method.

<form action="index.php" method="get">
<p>The form controls will show up here.>
form>

Result:

HTML5: Form Validation

You have probably seen forms on the web that give users messages if the form control has not been filled in correctly; this is known as form validation.

Validation helps ensure the user enters information in a form that the server will be able to understand when the form is submitted. Validating the contents of the form before it is sent to the server the helps:

Reduce the amount of work the server has to do.
Enables users to see if there are problems with the form faster than if validation were performed on the server.

<form action="login.php" method="POST">
  <label>Username:</label>
  <input type="text" name="Username" required/>
  <label>Password:</label>
  <input type="password" name="password" required/>
  <input type="submit" name="save" value="submit" />
</form>

Result:

HTML5: Date Input

Many forms need to gather information such as dates, email addresses, and URLs. This has traditionally been done using text inputs.

type="date" If you are asking the user for a date, you can use an element <input> and give the type attribute a value of date. This will create a date input in browsers that support the new HMTL5 input types.

<form action="login.php" method="POST">
                <label>Date:</label>
                <input type="date" name="Username" required/>
                <input type="submit" name="save" value="submit" />
            </form>

Result:

HTML5: Email & URL Input

type="email" If you ask a user for an email address, you can use the email input.

type="url" A URL input can be used when you are asking a user for a web page address.

<form action="login.php" method="POST">
                <label>Email:</label>
                <input type="email" name="email" required/>
                <input type="url" name="url" required/>
                <input type="submit" name="save" value="submit" />
            </form>

Result:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TutorialProg</title>

</head>
<body>
<form action="index" method="Post">
 <fieldset>
    <legend> Your Information: </legend>
    <label>Name: </label>
        <input type="text" name="name"/>
        <br />
    <label> Email: </label>
    <input type="email" name="email"/>
 <br/>
 </fieldset>
 <br />
 <fieldset>
    <legend> Your View:</legend>
 <label for="hear-about">How did you hear about us? </label>
 <select name="guide">
 <option value="google">Google</option>
 <option value="friend">Friend</option>
 <option value="advert">Advert</option>
 <option value="other">Other</option>
 </select>
 <br/>
 <label>Would you visit again?</label>
 <label>Yes </label>
 <input type="radio" name="rating" value="yes" />
 <label>No</label>
 <input type="radio" name="rating" value="no" />
 <label> Maybe</label>
 <input type="radio" name="rating" value="maybe" />
 <label for="comments">

 </label> Comments:  <label>
 <br />
 <textarea rows="4" cols="40"> </textarea>
 <br />
 <input type="checkbox" name="check" checked="checked" />
 Sign me up for register
 </label>
 <br />
 <input type="submit" value="Submit" />
 </fieldset>
 </form>
</body>
</html>

HTML

HTML Form

HTML Form

HTML Form is used to create user input.

Submitting Forms:

Submit buttons To submit data from your form to another web page

type="submit" The submit button is used to send a form to the server.

The value attribute is used to control the text that appears on a button. It is a good idea to specify the words you want to appear on a button because the default value of buttons on some

browsers is ‘Submit query’ and this might not be appropriate for all kinds of form.

Result:

Image buttons Similar to submit buttons but they allow you to use an image

Uploading files:

File upload Allows users to upload files (e.g. images) to a website.

<input> If you want to allow users to upload a file like image, video, mp3, or a PDF, you will need to use a file input box.

type="file" This type of input creates a box that looks like a text input followed by a browse button. When the user clicks on the browse button, a window opens up that allows them to select a file from their computer to be uploaded to the website.

When you are upload files, the method attribute on the element must have a value of post. You can not send files using the HTTP get method.

Result:

Button & hidden Controls

The <button> element was introduced to allow users more control over how their buttons appear, and to allow other elements to appear inside the button.

This means that you can combine text and images between the opening <button> tag and closing </button> tag.type="hidden" This example also shows a hidden form control. These form controls are not shown on the page although you can see them if you use the View Source option in the browser.

Labelling Form Controls

When introducing form controls, the code was kept simple by indicating the purpose of each one in text next to it. However, each form control should have its own <label> element as this makes the form accessible to vision-impaired users.

Grouping Form Elements

You can group related form controls together inside the <fieldset>element. This is particularly helpful for longer forms.

HTML form may have several form controls, each gathering different information. The server needs to new which piece of inputted data corresponds with which from element.

controls live inside element.This element should always carry the action attribute and will usually have a method attribute too.

action="index.php" Every element requires an action attribute. Its value is the URL for the page on the server that will receive the information in the form when it is submitted

method Forms can be sent using one of two methods: GET or POST.

With the GET method, the values from the form are added to the end of the URL specified in the action attribute. The best is for the get method:

Result:

HTML5: Form Validation

You have probably seen forms on the web that give users messages if the form control has not been filled in correctly; this is known as form validation.

Validation helps ensure the user enters information in a form that the server will be able to understand when the form is submitted. Validating the contents of the form before it is sent to the server the helps:

Result:

HTML5: Date Input

Many forms need to gather information such as dates, email addresses, and URLs. This has traditionally been done using text inputs.

type="date" If you are asking the user for a date, you can use an element <input> and give the type attribute a value of date. This will create a date input in browsers that support the new HMTL5 input types.

Result:

HTML5: Email & URL Input

type="email" If you ask a user for an email address, you can use the email input.

type="url" A URL input can be used when you are asking a user for a web page address.

Result:

Example:

Result:

Leave a comment

No Cmomments yet

This means that you can combine text and images between the opening <button> tag and closing </button> tag.
type="hidden" This example also shows a hidden form control. These form controls are not shown on the page although you can see them if you use the View Source option in the browser.