12 Apr 2017
HTML Forms
HTML Forms are used to collect different kinds of user inputs like name, email, phone, etc. and send them to the web server.
Forms contain elements called controls, for example inputbox, radio-buttons, checkbox, dropdowns, submit buttons, etc. Front-end Users fill the form by modifying these controls, like entering text, selecting dropdown values, etc. and then submit the form for processing.
HTML <form> tag is used to create and form in HTML. Let’s take an example:
<html>
<head>
<title>HTML Form</title>
</head>
<form>
<table>
<tr>
<th>Log In</th>
</tr>
<tr><td>Username:</td> <td><input type=”text”></td></tr>
<tr><td>Password:</td> <td><input type=”password”></td></tr>
<tr><td><input type=”submit” value=”Submit”></td></tr>
</table>
</form>
</html>
<head>
<title>HTML Form</title>
</head>
<form>
<table>
<tr>
<th>Log In</th>
</tr>
<tr><td>Username:</td> <td><input type=”text”></td></tr>
<tr><td>Password:</td> <td><input type=”password”></td></tr>
<tr><td><input type=”submit” value=”Submit”></td></tr>
</table>
</form>
</html>
Form Attributes
Below is a list of the some frequently used form attributes:
| Attribute | Description |
|---|---|
| Action | URL or path of file that processes the information, with this attribute form data is sent to the file specified, like action=’myfile.php’. If not specified, by default it will get processed on the same page where FORM is defined. |
| method | Method used to submit the data. Possible can use get and post. If not specified, by default its get. |
| target | Mentioned the target window, where the result of the script will be displayed. like _blank, _self, _parent etc. |
| enctype | enctype attribute use to specify how the browser encodes the data before it sends it to the server. Possible values can be application/x-www-form-urlencoded OR mutlipart/form-data |
Grouping Form Data with <fieldset> Tag
HTML tag <fieldset> is used to group related data in a form and other <legend> is a supported tag to defines a caption for the <fieldset> element.
Example: Login form
<html>
<head><title>Html Fieldset</title></head>
<body>
<form action="/action_page.php" style="width:20%;">
<fieldset>
<legend>Please login:</legend>
Username:<br>
<input type=”text” name=”username” value=””><br>
Password:<br>
<input type=”password” name=”password” value=””><br><br>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
</body>
</html>
<head><title>Html Fieldset</title></head>
<body>
<form action="/action_page.php" style="width:20%;">
<fieldset>
<legend>Please login:</legend>
Username:<br>
<input type=”text” name=”username” value=””><br>
Password:<br>
<input type=”password” name=”password” value=””><br><br>
<input type=”submit” value=”Submit”>
</fieldset>
</form>
</body>
</html>
About Author
bestonetechnologies
I am a software developer.
