Forms
HTML Forms are used to select different kinds of user input. Create text fields Create password field (You can find more examples at the bottom of this page) HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form: The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below. <input type=”text” /> defines a one-line input field that a user can enter text into: How the HTML code above looks in a browser: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. <input type=”password” /> defines a password field: How the HTML code above looks in a browser: Note: The characters in a password field are masked (shown as asterisks or circles). <input type=”radio” /> defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices: How the HTML code above looks in a browser: <input type=”checkbox” /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. How the HTML code above looks in a browser: <input type=”submit” /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input: How the HTML code above looks in a browser: 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_action.asp”. The page will show you the received input. Radio buttons Checkboxes Simple drop-down list Drop-down list with a pre-selected value Textarea Create a button Fieldset around form-data Form with text fields and a submit button Form with checkboxes Form with radio buttons Send e-mail from a form
How to create text fields. The user can write text in a text field.
How to create a password field.HTML Forms
HTML Forms - The Input Element
Text Fields
Last name:
Password Field
Radio Buttons
Female
Checkboxes
I have a car
Submit Button
More Input Examples
How to create radio buttons.
How to create checkboxes. A user can select or unselect a checkbox.
How to create a simple drop-down list.
How to create a drop-down list with a pre-selected value.
How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters.
How to create a button. Form Examples
How to create a border around elements in a form.
How to create a form with two text fields and a submit button.
How to create a form with three checkboxes and a submit button.
How to create a form with two radio buttons, and a submit button.
How to send e-mail from a form.HTML Form Tags
Try-It-Yourself Examples
<form>.
input elements
.
</form>
<form>
First name: <input type=”text” name=”firstname” /><br />
Last name: <input type=”text” name=”lastname” />
</form> <form>
Password: <input type=”password” name=”pwd” />
</form> <form>
<input type=”radio” name=”sex” value=”male” /> Male<br />
<input type=”radio” name=”sex” value=”female” /> Female
</form> <form>
<input type=”checkbox” name=”vehicle” value=”Bike” /> I have a bike<br />
<input type=”checkbox” name=”vehicle” value=”Car” /> I have a car
</form> <form name=”input” action=”html_form_action.asp” method=”get”>
Username: <input type=”text” name=”user” />
<input type=”submit” value=”Submit” />
</form> Tag Description <form> Defines an HTML form for user input <input /> Defines an input control <textarea> Defines a multi-line text input control <label> Defines a label for an input element <fieldset> Defines a border around elements in a form <legend> Defines a caption for a fieldset element <select> Defines a select list (drop-down list) <optgroup> Defines a group of related options in a select list <option> Defines an option in a select list <button> Defines a push button
