HTML FormsThe <form> ElementHTML forms are used to collect user input.
The <form> element defines an HTML form: Example
<form> . form elements . </form> HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more. The <input> ElementThe <input> element is the most important form element.
The <input> element has many variations, depending on the type attribute. Here are the types used in this chapter: Type Description
text Defines normal text input radio Defines radio button input (for selecting one of many choices) submit Defines a submit button (for submitting the form) Text Input<input > defines a one-line input field for text input:
Example
<form> First name:<br> <input "text" name="firstname"> <br> Last name:<br> <input "text" name="lastname"> </form> This is how it will look like in a browser:
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Radio Button Input<input > defines a radio button.
Radio buttons let a user select ONE of a limited number of choices: Example
<form> <input "radio" name="sex" value="male" checked>Male <br> <input "radio" name="sex" value="female">Female </form> This is how the HTML code above will be displayed in a browser:
The Submit Button<input > defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: Example
<form action="action_page.php"> First name:<br> <input "text" name="firstname" value="Mickey"> <br> Last name:<br> <input "text" name="lastname" value="Mouse"> <br><br> <input "submit" value="Submit"> </form> This is how the HTML code above will be displayed in a browser:
The Action AttributeThe action attribute defines the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button. Normally, the form is submitted to a web page on a web server. In the example above, a server-side script is specified to handle the submitted form: <form action="action_page.php">
If the action attribute is omitted, the action is set to the current page.
The Method AttributeThe method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:
<form action="action_page.php" method="GET"> or: <form action="action_page.php" method="POST"> When to Use GET?You can use GET (the default method):
If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address: action_page.php?firstname=Mickey&lastname=Mouse
GET is best suited to short amounts of data. Size limitations are set in your browser.
When to Use POST?You should use POST:
If the form is updating data, or includes sensitive information (password). POST offers better security because the submitted data is not visible in the page address. The Name AttributeTo be submitted correctly, each input field must have a name attribute.
This example will only submit the "Last name" input field: Example <form action="action_page.php"> First name:<br> <input "text" value="Mickey"> <br> Last name:<br> <input "text" name="lastname" value="Mouse"> <br><br> <input "submit" value="Submit"> </form> Grouping Form Data with <fieldset>The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset> element. Example <form action="action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input "text" name="firstname" value="Mickey"> <br> Last name:<br> <input "text" name="lastname" value="Mouse"> <br><br> <input "submit" value="Submit"></fieldset> </form> This is how the HTML code above will be displayed in a browser:
|
HTML HOME
HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Computercode HTML Comments HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Layout HTML Responsive HTML Iframes HTML JavaScript HTML Head HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML HTML Forms HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes HTML5 HTML5 Intro HTML5 Support HTML5 Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide HTML Graphics HTML Canvas HTML SVG HTML Media HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube HTML APIs HTML Geolocation HTML Drag/Drop HTML Local Storage HTML App Cache HTML Web Workers HTML SSE |