The <form> element All HTML forms start with a <form> element like this:

<form action=”url” method=”get/post”>

…………

</form>

Form Attribute

Attribute Description
Action Backend script ready to process your passed data.
accept-charset Specifies the charset used in the submitted form (default: the page charset).
Autocomplete Specifies if the browser should autocomplete the form (default: on).
Method Method to be used to upload data. The most frequently used are GET and POST methods.
Target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
Enctype You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are:·        application/x-www-form-urlencoded – This is the standard method most forms use in simple scenarios.

·        mutlipart/form-data – This is used when you want to upload binary data in the form of files like image, word file etc.
Name Specifies a name used to identify the form
Novalidate Specifies that the browser should not validate the form.

Example:  Form With Label, Text and Button

[copya id=”link_4316572154″ target=”4316572154″]Copy it[/copya]
[t_block id=”4316572154″ filename=”4316572154″]<!DOCTYPE html>
<html>

<body>

<h2>Send e-mail to qatraining@infotek-solutions.com:</h2>

<form action=”MAILTO:qatraining@infotek-solutions.com” method=”post” enctype=”text/plain”>

Name:<br>

<input type=”text” name=”name” value=””><br>

E-mail:<br>

<input type=”text” name=”mail” value=””><br>

Comment:<br>

<input type=”text” name=”comment” value=”” size=”50″><br><br>

<input type=”submit” value=”Send”>

<input type=”reset” value=”Reset”>

</form>

</body>
</html>[/t_block]

Complete Form Example with CSS:

[copya id=”link_6654155377″ target=”6654155377″]Copy it[/copya]
[t_block id=”6654155377″ filename=”6654155377″]<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
<style type=”text/css”>
form {
margin: 0 auto;
width: 400px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}

form div + div {
margin-top: 1em;
}

label {
display: inline-block;
width: 90px;
text-align: right;
}

input, textarea {
font: 1em sans-serif;
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #999;
}

input:focus, textarea:focus {
border-color: #000;
}

textarea {
vertical-align: top;
height: 5em;
resize: vertical;
}

.button {
padding-left: 90px;
}
button {
margin-left: .5em;
}
</style>
</head>
<body>
<form method=”<get or post>” action=”<action_script>”>
<div>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”user_name” />
</div>
<div>
<label for=”mail”>E-mail:</label>
<input type=”email” id=”mail” name=”user_email” />
</div>
<div>
<label for=”msg”>Message:</label>
<textarea id=”msg” name=”user_message”></textarea>
</div>
<div class=”button”>
<button type=”submit”>Send your message</button>
</div>
</form>
</body>
</html>[/t_block]