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>

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>

Leave a Reply