HTML Forms & Input
1.Froms
2.inputTag and Attributes
3.action Attribute
4.Form Examples
Forms are used to collect different kinds of user input.
Formis an area that can contain form elements
<form>
.
.
form elements
.
.
</form>
input Tag and Attributes
The type of input is specified with the type attribute.
TextFields
Text fields are used when you want the user to type letters,numbers,and so on in a form.
The action attribute specifies where to send the form-data when a form is submitted.
<html>
<body>
<form action="">
First name:
<input type="text" name="firstname"/>
<br/>
Last name:
<input type="text" name="lastname"/>
</form>
</body>
</html>
The value attribute specifies the value of an <input> element.
The value attribute is used differently for different input types:
For "button", "reset", and "submit" - it defines the text on the button
For "text", "password", and "hidden" - it defines the initial (default) value of the input field
For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit)
The name attribute specifies the name of an <input> element.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
Note: Only form elements with a name attribute will have their values passed when submitting a form.
Note: in the most of the web browsers, the width of the text field is 20 characters by defult.
Check Boxes
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike>
<br/>
I have a car:
<input type="checkbox" name="vehicle" value="Car">
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
</html>
Radio Buttons
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked" name="sex" value="male">
<br/>
Female:
<input type="radio" name="sex" value="female">
</form>
</body>
</html>
Drop-Down List
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">volvo</option>
<option value="saab">saab</option>
<option value="fiat">fiat</option>
<option value="audi">Audi</option>
</form>
</body>
</html>
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">volvo</option>
<option value="saab">saab</option>
<option value="fiat">fiat</option>
<option value="audi">Audi</option>
</form>
</body>
</html>
Text Area
you can write an unlimited number of characters.
<html>
<body>
<textarea rows="10" cols="30"> The cat was playing in the garden.</textarea>
</body>
</html>
Buttons
<html>
<body>
<form action="">
<input type="button" value="Hello World!">
</form>
</body>
</form>
Fieldset
A fieldset is a grouping of data fields
<html>
<body>
<fieldset>
<legend>Helth indormation:</legend>
<form action="">
height<input type="text" size="3">
weight<input type="text" size="3">
</form>
</fieldset>
</body>
</html>
Action attribute
when the user click the submitt 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 recieved input
<form name="input" action="html_form_submit.asp" method="get">
Username:
<input type="text" name="user"/>
<input type="submit" value="submit"/>
</form>
If you type some characters in the text field and click the submitt button, the browser sends your input to a page called "html_form_submit.asp". the page will show you the received input.
Form Example
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Type your first name:
<input type="text" name="firstname" value="Mickey" size="20">
<br/>
Tyepe your last name:
<input type="text> name="lastname" value="Mouse" size="20">
<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>
From with CheckBoxes
<html>
<body>
<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 ahve airplane:
<input type="checkbox" name="vehicle" value="Airplane"/>
<br/>
<br/>
<input type="button" value="submitt"/>
</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>
Form with Radio Buttons
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Male:
<input type="radio" checked="checked" name="sex" value="male">
<br/>
Female:
<input type="radio" name="sex" value="female">
<br/>
<input type="submit" value="submit">
<p>If you Click the "submit" button, you will send your input to a new page called html_form_action.asp.</p>
</form>
</body>
</html>
GET requests can be cached
GET requests remain in the browser history
GET requests can be bookmarked
GET requests should never be used when dealing with sensitive data
GET requests have length restrictions
GET requests should be used only to retrieve data
POST requests are never cached
POST requests do not remain in the browser history
POST requests cannot be bookmarked
POST requests have no restrictions on data length
Send E-mail from a Form
<html>
<body>
<form action="mailto:someone@w3schools.com" method="post" enctype="text/plain">
<h3>This form sends an e-mail to w3schools.</h3>
Name:<br/>
<input type="text" name="name" value="yourname" size="20">
<br/>
Mail:<br/>
<input type="text" name=mail" value="yourname" size="20">
<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>
TAG Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a textarea(a multipleline text input control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list(a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a pushbutton
<isindex> Deprecated. use <input> instead
1.Froms
2.inputTag and Attributes
3.action Attribute
4.Form Examples
Forms are used to collect different kinds of user input.
Formis an area that can contain form elements
<form>
.
.
form elements
.
.
</form>
input Tag and Attributes
The type of input is specified with the type attribute.
TextFields
Text fields are used when you want the user to type letters,numbers,and so on in a form.
The action attribute specifies where to send the form-data when a form is submitted.
<html>
<body>
<form action="">
First name:
<input type="text" name="firstname"/>
<br/>
Last name:
<input type="text" name="lastname"/>
</form>
</body>
</html>
The value attribute specifies the value of an <input> element.
The value attribute is used differently for different input types:
For "button", "reset", and "submit" - it defines the text on the button
For "text", "password", and "hidden" - it defines the initial (default) value of the input field
For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit)
The name attribute specifies the name of an <input> element.
The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
Note: Only form elements with a name attribute will have their values passed when submitting a form.
Note: in the most of the web browsers, the width of the text field is 20 characters by defult.
Check Boxes
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike>
<br/>
I have a car:
<input type="checkbox" name="vehicle" value="Car">
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
</html>
Radio Buttons
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked" name="sex" value="male">
<br/>
Female:
<input type="radio" name="sex" value="female">
</form>
</body>
</html>
Drop-Down List
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">volvo</option>
<option value="saab">saab</option>
<option value="fiat">fiat</option>
<option value="audi">Audi</option>
</form>
</body>
</html>
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">volvo</option>
<option value="saab">saab</option>
<option value="fiat">fiat</option>
<option value="audi">Audi</option>
</form>
</body>
</html>
Text Area
you can write an unlimited number of characters.
<html>
<body>
<textarea rows="10" cols="30"> The cat was playing in the garden.</textarea>
</body>
</html>
Buttons
<html>
<body>
<form action="">
<input type="button" value="Hello World!">
</form>
</body>
</form>
Fieldset
A fieldset is a grouping of data fields
<html>
<body>
<fieldset>
<legend>Helth indormation:</legend>
<form action="">
height<input type="text" size="3">
weight<input type="text" size="3">
</form>
</fieldset>
</body>
</html>
Action attribute
when the user click the submitt 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 recieved input
<form name="input" action="html_form_submit.asp" method="get">
Username:
<input type="text" name="user"/>
<input type="submit" value="submit"/>
</form>
If you type some characters in the text field and click the submitt button, the browser sends your input to a page called "html_form_submit.asp". the page will show you the received input.
Form Example
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Type your first name:
<input type="text" name="firstname" value="Mickey" size="20">
<br/>
Tyepe your last name:
<input type="text> name="lastname" value="Mouse" size="20">
<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>
From with CheckBoxes
<html>
<body>
<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 ahve airplane:
<input type="checkbox" name="vehicle" value="Airplane"/>
<br/>
<br/>
<input type="button" value="submitt"/>
</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>
Form with Radio Buttons
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Male:
<input type="radio" checked="checked" name="sex" value="male">
<br/>
Female:
<input type="radio" name="sex" value="female">
<br/>
<input type="submit" value="submit">
<p>If you Click the "submit" button, you will send your input to a new page called html_form_action.asp.</p>
</form>
</body>
</html>
GET requests can be cached
GET requests remain in the browser history
GET requests can be bookmarked
GET requests should never be used when dealing with sensitive data
GET requests have length restrictions
GET requests should be used only to retrieve data
POST requests are never cached
POST requests do not remain in the browser history
POST requests cannot be bookmarked
POST requests have no restrictions on data length
Send E-mail from a Form
<html>
<body>
<form action="mailto:someone@w3schools.com" method="post" enctype="text/plain">
<h3>This form sends an e-mail to w3schools.</h3>
Name:<br/>
<input type="text" name="name" value="yourname" size="20">
<br/>
Mail:<br/>
<input type="text" name=mail" value="yourname" size="20">
<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>
TAG Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a textarea(a multipleline text input control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list(a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box
<button> Defines a pushbutton
<isindex> Deprecated. use <input> instead
No comments:
Post a Comment