Pages

Saturday, May 17, 2014

HTML Form


FORM FIELDS:

These fields can be added to your forms:
1.     Text field
2.     Password field
3.     Hidden field
4.     Text area
5.     Check box
6.     Radio button
7.     Drop-down menu
8.     Submit button
9.     Reset button
10. Image button
 

HTML Forms:

HTML forms are used to pass data to a server.
An HTML 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:
<form>
.
input elements
.
</form>


HTML Forms - The Input Element:

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 common input types are described below.



TEXT AREA:

Text areas are text fields that can span several lines. Ulike most other form fields, text areas are not defined with an <input> tag. Instead you enter a <textarea> tag where you want the text area to start and a closing </textarea> tag where you want the area to end. Everything written between these tags will be presented in the text area box.

Settings:
Below is a listing of valid settings for text areas:
HTML
EXPLANATION
textarea
rows=
cols=
name=
tabindex=

wrap=
off
virtual
physical
Text area - several lines
Rows in the field.
Columns in the field.
Name of the field.
Tab order of the field.


Turns off linebreaking
Shows linebreaking, but
sends text as entered.
Inserts linebreaks when
needed and even sends it.



An example:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
 <body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
<div align="center">
This is outside the area<br><br>
<textarea cols="40" rows="5" name="myname">
Now we are inside the area - which is nice.
</textarea>
<br><br>
And now we are outside the area again.
</div>
</form>
</body>
</html>



Text Fields:

<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

How the HTML code above looks in a browser:
First name: 
Last name: 
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. 



Password Field:

<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>

How the HTML code above looks in a browser:
Password: 
Note: The characters in a password field are masked (shown as asterisks or circles).



Radio Buttons:

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY 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 the HTML code above looks in a browser:
Male
Female



Drop down menu:

Drop-down menus are probably the most flexible objects you can add to your forms. Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed). The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space. But that is also a disadvantage, because people can't see all options in the menu right away. There is a workaround for this - with the size setting, you can customize the menu so it shows more than just one option at a time, but when you do that - you also lose the advantage of taking up less space. So whatever you decide - there is always a bonus and a price to pay. Sometimes you may want to replace text fields with drop-down menus. This might be because selecting from a menu is easier than typing. But it could also be because the script that handles the form can't interpret just any text entry. For example, you will often be asked to choose your state from a drop-down menu. This might be because picking it from the menu is easier than typing the name of the state. Along the same line, you may often asked to enter the 2 letter initials of your state from a drop-down menu as well. This could prevent confusion for the script that handles the form input. If, say, the script was programmed to only accept capital letters, then a drop-down menu would secure that no invalid entries were made. Another typical example would be replacing links with drop-down menus.

Settings:
Below is a listing of valid settings for drop-down menus:
HTML
EXPLANATION
select
  name=

size=
  multiple=

option
  selected
  value=

Drop-down menu
Name of the field.

Visible items in list.
Allows multiple choices if yes.

Individual items in the menu.
Default select the item.
Value to send if selected.


Drop-down menus combine <select> and <option>.
Both tags have an opening and a closing tag.

A typical example of the syntax would be:
<select>
  <option>Milk</option>
  <option>Coffee</option>
  <option>Tea</option>
</select>

The <select> tag defines the menu. The name setting adds an internal name to the field so the program that handles the form can identify the fields. The size option defines how many items should be visible at a time. Default is one item. The multiple setting will allow for multiple selections if present. The <option> tag defines the single items in the menu. The value setting defines what will be submitted if the item is selected. This is not always the same as what it says in the menu. If our field was defined this way:
<option value="ID">Idaho</option>
then, in the menu it would say "Idaho" but when the form was submitted the abbreviated "ID" would actually be sent. You can force an item to be default selected by adding the selected option:<option selected>

An example:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
</div>
</form>
</body>
</html>

And the resulting output from it:







Checkboxes:

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<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>

How the HTML code above looks in a browser:
I have a bike
I have a car





Image button:

Image buttons have the same effect as submit buttons. When a visitor clicks an image button the form is sent to the address specified in the action setting of the<form> tag. Since visitors aren't always perfectionists you might consider adding a javascript validation of the content before it is actually sent.

Setting:
Below is a listing of valid settings for image buttons:
HTML
EXPLANATION
image
  name=
  src=
  align=
  border=
  width=
  height=
  vspace=
  hspace=
  tabindex=
Submit button
Name of the image.
Url of the image.
Alignment of the image.
Border width around the image.
Width of the image.
Height of the image.
Spacing over and under image.
Spacing left and right of image.
Tab order of the image.

The name setting adds an internal name to the image button so the program that handles the form doesn't confuse it with the other fields.

The src setting defines the URL of the image.

The align setting defines how the image is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.

The border setting defines the width (in pixels) of the border around the image.

The width setting defines the width of the image.

The height setting defines the height of the image.

The vspace setting defines the spacing over and under the image (in pixels).

The hspace setting defines the spacing to the left and right of the image (in pixels).

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.
An example:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="image" src="rainbow.gif" name="image" width="60" height="60"><br>
</div>
</form>
</body>
</html>

And the resulting output from it:








Hidden field:

Hidden fields are similar to text fields, with one very important difference! The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field: To submit information that is not entered by the visitor.

Settings:
Below is a listing of valid settings for hidden fields:

HTML
EXPLANATION
hidden
  name=
  value=
Hidden field
Name of the field.
Value of the field.
The name setting adds an internal name to the field so the program that handles the form can identify the fields.

The value setting defines what will be sent once the form is submitted.


An example:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<input type="text" size="25" value="Enter your name here!">
<input type="hidden" name="Language" value="English">
<br><br>
</div>
</form>
</body>
</html>

And the resulting output from it:



The hidden field does not show, but still, when the form is submitted the hidden field is sent with it. In this example the hidden field would tell the program that handles the form, that the users preferred language is English.



Submit Button:

<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:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

How the HTML code above looks in a browser:
Username: 
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.




Reset button:
When a visitor clicks a reset button, the entries are reset to the default values.
Settings:
Below is a listing of valid settings for reset buttons:

HTML
EXPLANATION
reset
  name=
  value=
  align=
  tabindex=
Reset button
Name of the button.
Text written on the button.
Alignment of the button.
Tab order of the button.
The value setting defines what is written on the button.

The align setting defines how the button is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

An example:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="submit" value="Send me your name!"> <input type="reset" value="Reset!"><br>
</div>
</form>
</body>
</html>

And the resulting output from it:



 






How to create radio buttons source Code:

<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
</body>
</html>

How to create radio buttons result:
Male
Female
Note: When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.




How to create checkboxes. A user can select or unselect a checkbox source code:

<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
</body>
</html>

I have a bike
I have a car


<!DOCTYPE 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>
</select>
</form>
</body>
</html>






How to create a drop-down list with a pre-selected value source code:

<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>




How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters source code:

<!DOCTYPE html>
<html>
<body>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>






How to create a button source code:

<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>




How to create a border around elements in a form source code:

<!DOCTYPE html>
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
</body>
</html>
How to create a border around elements in a form result:

Personal information:Name: 
E-mail: 
Date of birth: 




How to create a form with two text fields and a submit buttons source code:

<!DOCTYPE html>
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
</body>
</html>

How to create a form with two text fields and a submit button result:
First name: 
Last name: 
If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".




How to create a form with two checkboxes and a submit button:

<!DOCTYPE html>
<html>
<body>
 <form name="input" action="html_form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br><br>
<input type="submit" value="Submit">
</form>
 <p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
 </body>
</html>

How to create a form with two checkboxes and a submit button result:
I have a bike
I have a car

If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".




How to create a form with two radio buttons, and a submit button:

<!DOCTYPE html>
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
 </body>
</html>

How to create a form with two radio buttons, and a submit button result:
Male
Female
If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".





How to send e-mail from a form:

<!DOCTYPE html>
<html>
<body>
<h3>Send e-mail to someone@example.com:</h3>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>

How to send e-mail from a form result:

Send e-mail to someone@example.com:

Name:

E-mail:

Comment:


 




HTML Form Tags:

New tags in HTML5.

HTML <form> Tag:

 Example
An HTML form with two input fields and one submit button:
<form action="demo_form.asp" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Definition and Usage
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>



HTML <input> Tag:

Example

An HTML form with three input fields; two text fields and one submit button:
<form action="demo_form.asp">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Definition and Usage

The <input> tag specifies an input field where the user can enter data.
<input> elements are used within a <form> element to declare input controls that allow users to input data.
An input field can vary in many ways, depending on the type attribute.

Tips and Notes

Note: The <input> element is empty, it contains attributes only.
Tip: Use the <label> element to define labels for <input> elements.




HTML <textarea> Tag:

Example

An HTML text area:
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

 Definition and Usage
The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.



HTML <label> Tag:

Example

Two radio buttons with labels:
<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

Definition and Usage

The <label> tag defines a label for an <input> element. The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

Tips and Notes
Tip: A label can be bound to an element either by using the "for" attribute, or by placing the element inside the <label> element.




HTML <fieldset> Tag:

Example

Group related elements in a form:
<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form

Definition and Usage

The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.

Tips and Notes

Tip: The <legend> tag defines a caption for the <fieldset> element.




HTML <optgroup> Tag:

Example

Group related options with <optgroup> tags:
<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>

Definition and Usage

The <optgroup> is used to group related options in a drop-down list.
If you have a long list of options, groups of related options are easier to handle for a user.




HTML <option> Tag:

Example

A drop-down list with four options:
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Definition and Usage

The <option> tag defines an option in a select list.
<option> elements go inside a <select> or <datalist> element.

Tips and Notes

Note: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server.
Tip: If you have a long list of options, you can group related options with the <optgroup> tag.




HTML <button> Tag: 

Example

A clickable button is marked up as follows:
<button type="button">Click Me!</button>

Definition and Usage

The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.

Tips and Notes

Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.




HTML <datalist> Tag:

 Example
An <input> element with pre-defined values in a <datalist>:
<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>


Definition and Usage

The <datalist> tag specifies a list of pre-defined options for an <input> element.
The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.
Use the <input> element's list attribute to bind it together with a <datalist> element.




HTML <keygen> Tag:

 Example

A form with a keygen field:
<form action="demo_keygen.asp" method="get">
  Username: <input type="text" name="usr_name">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

 Definition and Usage
The <keygen> tag specifies a key-pair generator field used for forms.
When the form is submitted, the private key is stored locally, and the public key is sent to the server.

Differences Between HTML 4.01 and HTML5

The <keygen> element is new in HTML5.




HTML <output> Tag:

Example

Perform a calculation and show the result in an <output> element:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

Definition and Usage

The <output> tag represents the result of a calculation (like one performed by a script).

Differences Between HTML 4.01 and HTML5

The <output> tag is new in HTML5.




HTML <select> Tag:

Example

Create a drop-down list with four options:
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Tips and Notes

Tip: The <select> element is a form control and can be used in a form to collect user input.




HTML Forms and Input:
1Create text fields
<!DOCTYPE html>
<html>
<body>
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
Result
First name: 
Last name: 
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.




2Create password field
<!DOCTYPE html>
<html>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>
Result
Username: 
Password: 
Note: The characters in a password field are masked (shown as asterisks or circles).


3Checkboxes
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
</body>
</html>
Result
I have a bike
I have a car




4.Radio buttons
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
</body>
</html>
Result
Male
Female
Note: When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.





5.Simple drop-down list
<!DOCTYPE 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>
</select>
</form>
</body>
</html>




6.Drop-down list with a pre-selected value
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>




7Textarea (a multi-line text input field)
<!DOCTYPE html>
<html>
<body>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>




8Create a button
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>




9Draw a border around form-data
<!DOCTYPE html>
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
</body>
</html>


Result
Personal information:Name: 
E-mail: 
Date of birth: 




10Form with text fields and a submit button
<!DOCTYPE html>
<html>
<body>
 <form name="input" action="html_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
</body>
</html>
Result
First name: 
Last name: 
If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".





11Form with checkboxes and a submit button
<!DOCTYPE html>
<html>
<body>
 <form name="input" action="html_form_action.asp" method="get">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
</body>
</html>
Result
I have a bike
I have a car

If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".




12Form with radiobuttons and a submit button
<!DOCTYPE html>
<html>
<body>
 <form name="input" action="html_form_action.asp" method="get">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
</body>
</html>
Result
Male
Female
If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".





13Send e-mail from a form
<!DOCTYPE html>
<html>
<body>
<h3>Send e-mail to someone@example.com:</h3>
 <form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Result

Send e-mail to someone@example.com:

Name:

E-mail:

Comment:


 




HTML form special project:
Example:1
<!DOCTYPE html>
<html>
<head>
<title> Foam element and relevant tags</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information:</legend>
<input type="text" name="FirstName" value="Bappi" > Type your First Name <br />
<input type="text" name="LastName" size="20"> Type your Last Name <br />
Type your Address <br /><textarea " NAME = "C1" Rows = "5" COLS = "40"></textarea> <br />
Age<input type="password" name="age"><br />
</fieldset>
<fieldset>
<legend>Course and Location:</legend>
<input type = "radio" name = "a1"> 1yr Diploma<br />
<input type = "radio" name = "a1"> 2yr Diploma<br />
<input type = "radio" name = "a1"> 3yr Diploma<br />
<input type = "radio" name = "a2"> <label>Dhaka </label>
<input type = "radio" name = "a2"> <label>Chittagong</label>
<input type = "radio" name = "a2"> <label>Khulna</label>
<input type = "radio" name = "a2"> <label>Rajshahi </label><br />
</fieldset>
<input type = "checkbox"> morning shift <br />
<input type = "checkbox"> noon shift <br />
<input type = "checkbox"> evening shift<br />
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
</html>

Result:
Personal Information: Type your First Name 
 Type your Last Name 
Type your Address 
 
Age
Course and Location: 1yr Diploma
 2yr Diploma
 3yr Diploma
 Dhaka  Chittagong  Khulna  Rajshahi 
 morning shift 
 noon shift 
 evening shift
 





Button:
<!DOCTYPE html>
<html>
<head>
<title> Foam element and relevant tags</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information:</legend>
<input type="text" name="FirstName" value="Bappi" > Type your First Name <br />
<input type="text" name="LastName" size="20"> Type your Last Name <br />
Type your Address <br /><textarea " NAME = "C1" Rows = "5" COLS = "40"></textarea> <br />
Age<input type="password" name="age"><br />
</fieldset>
<fieldset>
<legend>Course and Location:</legend>
<input type = "radio" name = "a1"> 1yr Diploma<br />
<input type = "radio" name = "a1"> 2yr Diploma<br />
<input type = "radio" name = "a1"> 3yr Diploma<br />
</fieldset>
<input type = "checkbox"> morning shift <br />
<input type = "checkbox"> noon shift <br />
<input type = "checkbox"> evening shift<br />
Floor <select>
<optgroup label="First Building">
    <option> ground floor
    <option selected> first floor
    <option> second floor
</optgroup>
<optgroup label="Second Building">
    <option> ground floor
    <option> first floor
    <option> second floor
</optgroup>
</select> <br />
<input type="reset" value="Reset">
<input type="submit" value="Submit">
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</form>
</body>
</html>




FORM MAIL:
<!DOCTYPE html>
<html>
<head>
<title> Foam element and relevant tags</title>
</head>
<body>
<form action="MAILTO:admin@novacomputerbd.com" method="post" enctype="text/plain">
Type your First Name <br />
<input type="text" name="FirstName"> <br />
Type your Last Name <br />
<input type="text" name="LastName" size="20"> <br />
Type yous Mail Address <input type="text" name="age"><br />
Type your Comments <br />
<textarea " NAME = "C1" Rows = "5" COLS = "40"></textarea> <br />
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
</html>

No comments:

Post a Comment