HTML Forms




<form>       Defines a form for user input
<input>      Defines an input field, possible types are: text, password, radio, checkbox, button, submit, file, image(image as submit btn), reset
text (size="3")
<textarea>  Defines a text-area (a multi-line text input control)
<label>       Defines a label to a control
<fieldset>   Defines a fieldset: you can draw a border and a caption around the set of items in your form
<legend>    Defines a caption for a fieldset

<select>     Defines a selectable list (drop-down list)
<optgroup>     Defines an option group
<option>     Defines an option in the drop-down box

<button>     Defines a push button


action is the address of the page that receives the parameters of the current form. method is "post|get". 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 on the server to send the content to.
get: With the HTTP "get" method, the form data set is appended to the URI specified by the action attribute (with a question-mark ("?") as separator) and this new URI is sent to server.
The "get" method should be used when the form is idempotent (i.e., causes no side-effects). Many database searches have no visible side-effects and make ideal applications for the "get" method.
post: With the HTTP "post" method, the form data set is included in the body of the form and sent to the server.
If the service associated with the processing of a form causes side effects (for example, if the form modifies a database or subscription to a service), the "post" method should be used.

Note on Unicode: The "get" method restricts form data set values to ASCII characters. Only the "post" method (with enctype="multipart/form-data") is specified to cover the entire [ISO10646] character set.


<form action="registeration.asp" method="get">
Username:
<input type="text" name="name"  value="Name">
<br>
Password:
<input type="password" name="password">
<br>
<input type="submit" value="Submit" />
</form>

<form>
<input type="radio" name="sex" value="male" checked="checked"/> Male
<br />
<input type="radio" name="sex" value="female"  /> Female
</form>

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br>
I have a car:
<input type="checkbox" name="vehicle" value="Car" checked="checked"/>
</form>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
</select>
</form>
<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>


<form>
<textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>
</form>

<form>
<input type="button" value="Hello world!">
</form>

draw a border with a caption around your data.
<form action="">
<fieldset>
<legend>
Health <b>info</b>rmation:
</legend>
Height <input type="text" size="3">
Weight <input type="text" size="3">

</fieldset>
</form>

Label

  If you use the label tag for prompts associated with fields, clicking on the label transfers focus to the input field – You can either use the "for" attribute or enclose the field for within the label
<label for="fname">First name:</label>
<input type="text" name="userFirstName" id="fname"/>             
    OR
<label>First name:
<input type="text" name="userFirstName">
</label>


<input type="hidden" name="country" value="Norway">
<button type="button" onclick="alert('Hello world!')">Click Me!</button>


<!calls the local mailing program>
<form action="MAILTO:someone@w3schools.com" method="post" enctype="text/plain">

This form sends an e-mail to W3Schools.
Name: <input type="text" name="name" value="yourname" size="20">
<br>
Mail: <input type="text" name="mail" value="yourmail" size="20">
<br>
Comment: <input type="text" name="comment" value="yourcomment" size="40">
<br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

<form action="form_action.asp" method="get" target="_blank">
Form Target Window
_blank      Open in a new window
_self         Open in the same frame as it was clicked
_parent     Open in the parent frameset
_top          Open in the full body of the window
framename Open in a named frame












Comments