Hello friends here is a descriptive tutorial about form creation in HTML. To create form in HTML <form> tag is used. Forms are useful in creation of student registration, employee registration, login, etc.
The most common useful attributes of form tag is listed below:
name attribute:
"name" attribute is used to give name of form. This attribute is useful when we want to access form's element's value.
action attribute:
"action" attribute is useful when we want redirect to particular page. In short, "action" attribute contains url/path that we want to redirect after submit button is clicked.
method attribute:
"method" attribute has two values that are "get" and "post". This attribute decides how form data is passed to targeted page. If we use "get" method then form's data is displayed in the query string and if we use "post" method then form's data is not displayed in the query string. For security concern use "post" method. If page requires bookmark then use "get" method. If you not write "method" attribute then by default is "get".
Above mentioned three attributes are most common attributes. Other attributes like "enctype" is used when file uploading like "enctype=multipart/form-data", "onreset" is an event and called when reset button is clicked, "onsubmit" is also an event and called when submit button is clicked, "target" attribute is used for to open page in new window or in same frame or same window, and "runat" attribute is used to run form at server side.
Form example with attributes:
<input type="button" />
This tag/attribute generates simple button. We have to provide method name to onclick event of this button to work.
<input type="checkbox" />
Checkbox is used when multiple selection is there. Example of multiple selection is hobbies, skills, etc.
We can make checkbox checked by default using checked="checked" attribute. We can disable also using disabled="disabled" attribute.
<input type="file" />
type="file" is used for file uploading.
<input type="hidden" />
type="hidden" is used for to pass data hiddenly.
<input type="image" />
type="image" is similar to submit button but contains image.
<input type="password" />
type="password" is used for password field. This is used in user login and registration form.
<input type="radio" />
type="radio" creates radio button and only one is selected in group.
<input type="reset" />
type="reset" is used to reset form. This reset button removes all fields' value.
<input type="submit" />
type="submit" is a submit button and mostly used for form submission.
<input type="text" />
type="text" is used for text input. Below is a link about detail tutorial of input type="text".
<textarea></textarea>
Textarea tag is used for large text input. For example, address, resume, etc can be taken using <textarea> tag.
<select></select>
<select> tag is used for drop down menu and it also provides for multiple selection.
<option></option>
<option> tag is child tag of <select> tag. It is used to define options for dropdown menu.
HTML Form Example:
Video Tutorial:
 |
| Create HTML Form |
The most common useful attributes of form tag is listed below:
- name
- action
- method
- enctype
- onreset
- onsubmit
- runat
- target
name attribute:
"name" attribute is used to give name of form. This attribute is useful when we want to access form's element's value.
action attribute:
"action" attribute is useful when we want redirect to particular page. In short, "action" attribute contains url/path that we want to redirect after submit button is clicked.
method attribute:
"method" attribute has two values that are "get" and "post". This attribute decides how form data is passed to targeted page. If we use "get" method then form's data is displayed in the query string and if we use "post" method then form's data is not displayed in the query string. For security concern use "post" method. If page requires bookmark then use "get" method. If you not write "method" attribute then by default is "get".
Above mentioned three attributes are most common attributes. Other attributes like "enctype" is used when file uploading like "enctype=multipart/form-data", "onreset" is an event and called when reset button is clicked, "onsubmit" is also an event and called when submit button is clicked, "target" attribute is used for to open page in new window or in same frame or same window, and "runat" attribute is used to run form at server side.
Form example with attributes:
<form name="frm" action="xyz.php" method="post">
...
</form>
- <input type="button" />
- <input type="checkbox" />
- <input type="file" />
- <input type="hidden" />
- <input type="image" />
- <input type="password" />
- <input type="radio" />
- <input type="reset" />
- <input type="submit" />
- <input type="text" />
- <textarea></textarea>
- <select></select>
- <option></option>
<input type="button" />
This tag/attribute generates simple button. We have to provide method name to onclick event of this button to work.
<input type="checkbox" />
Checkbox is used when multiple selection is there. Example of multiple selection is hobbies, skills, etc.
We can make checkbox checked by default using checked="checked" attribute. We can disable also using disabled="disabled" attribute.
<input type="file" />
type="file" is used for file uploading.
<input type="hidden" />
type="hidden" is used for to pass data hiddenly.
<input type="image" />
type="image" is similar to submit button but contains image.
<input type="password" />
type="password" is used for password field. This is used in user login and registration form.
<input type="radio" />
type="radio" creates radio button and only one is selected in group.
<input type="reset" />
type="reset" is used to reset form. This reset button removes all fields' value.
<input type="submit" />
type="submit" is a submit button and mostly used for form submission.
<input type="text" />
type="text" is used for text input. Below is a link about detail tutorial of input type="text".
<textarea></textarea>
Textarea tag is used for large text input. For example, address, resume, etc can be taken using <textarea> tag.
<select></select>
<select> tag is used for drop down menu and it also provides for multiple selection.
<option></option>
<option> tag is child tag of <select> tag. It is used to define options for dropdown menu.
HTML Form Example:
<form name="frm" action="#" method="post">
<table border="0px" align="center" cellpadding="10px" >
<tr>
<td>Username : </td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>Password : </td>
<td><input type="password" name="pass" /></td>
</tr>
<tr>
<td>Email Id : </td>
<td><input type="text" name="emailid" /></td>
</tr>
<tr>
<td>Address : </td>
<td><textarea name="address" cols="15" rows="2"></textarea> </td>
</tr>
<tr>
<td>Gender : </td>
<td><input type="radio" name="r1" value="male" />Male
<input type="radio" name="r1" value="female" />Female
</td>
</tr>
<tr>
<td>City : </td>
<td><select name="city">
<option value="select">Select</option>
<option value="New Delhi">New Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
</select>
</td>
</tr>
<tr>
<td>Hobbies : </td>
<td><input type="checkbox" name="traveling" value="reading" />Traveling
<input type="checkbox" name="reading" value="reading" />Reading
<input type="checkbox" name="cricket" value="cricket" />Cricket
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="btn_submit" value="Save" />
<input type="reset" name="btn_reset" />
</td>
</tr>
</table>
</form>
Video Tutorial:
0 comments :
Post a Comment