Form creation
<html> <body> <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> <h3>This form sends an e-mail to W3Schools.</h3> Name:<br /> <input type="text" name="name" value="yourname" /> <br /> Mail:<br /> <input type="text" name="mail" value="yourmail" /> <br /> Comment:<br /> <input type="text" name="comment" value="yourcomment" size="40" /> <br /><br /> <input type="submit" value="Send"> <input type="reset" value="Reset">
</form> </body> </html>
result
This form sends an e-mail to W3Schools.
Name:
yourname
Mail:
yourmail
Comment:
yourcomment
Radio buttons
<html> <body>
<form name="input" action="html_form_action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked" /><br /> Female: <input type="radio" name="Sex" value="Female" /><br /> <input type ="submit" value ="Submit" /> </form>
<p>If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.</p>
</body> </html>
Male: Female:
Submit
If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.
<html> <body>
<fieldset> <legend> Health information: </legend> <form action=""> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form> </fieldset> <p> If there is no border around the input form, your browser is too old. </p> </body> </html>
Result
Health information: Height Weight
If there is no border around the input form, your browser is too old.
Checkbox submit
<form name="input" action="html_form_action.asp" method="get"> I have a bike: <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> <br /><br /> <input type="submit" value="Submit" /> </form> <p> If you click the "Submit" button, you send your input to a new page called html_form_action.asp. </p>
result I have a bike: I have a car: I have an airplane:
Submit
If you click the "Submit" button, you send your input to a new page called html_form_action.asp.
HTML Forms and Input
Previous Next Chapter
HTML Forms are used to select different kinds of user input.
Try-It-Yourself Examples
Text fields This example demonstrates how to create text fields on an HTML page. A user can write text in a text field. Password fields This example demonstrates how to create a password field on an HTML page. (You can find more examples at the bottom of this page)
Forms
A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag.
<form> . input elements . </form>
Input
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form>
How it looks in a browser:
First name: Last name:
Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form>
How it looks in a browser:
Male Female
Note that only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
<form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form>
How it looks in a browser:
I have a bike: I have a car: I have an airplane:
The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
<form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
How it looks in a browser:
Username:
Submit
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_submit.asp". The page will show you the received input.
More Examples
Checkboxes This example demonstrates how to create check-boxes on an HTML page. A user can select or unselect a checkbox. Radio buttons This example demonstrates how to create radio-buttons on an HTML page. Simple drop down box This example demonstrates how to create a simple drop-down box on an HTML page. A drop-down box is a selectable list. Another drop down box This example demonstrates how to create a simple drop-down box with a pre-selected value. Textarea This example demonstrates how to create a text-area (a multi-line text input control). A user can write text in the text-area. In a text-area you can write an unlimited number of characters. Create a button This example demonstrates how to create a button. On the button you can define your own text. Fieldset around data This example demonstrates how to draw a border with a caption around your data.
Form Examples
Form with input fields and a submit button This example demonstrates how to add a form to a page. The form contains two input
fields and a submit button. Form with checkboxes This form contains three checkboxes, and a submit button. Form with radio buttons This form contains two radio buttons, and a submit button. Send e-mail from a form This example demonstrates how to send e-mail from a form.
Form Tags
Tag <form> <input> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> <isindex> Description Defines a form for user input Defines an input field Defines a text-area (a multi-line text input control) Defines a label to a control Defines a fieldset Defines a caption for a fieldset Defines a selectable list (a drop-down box) Defines an option group Defines an option in the drop-down box Defines a push button Deprecated. Use <input> instead
