Tuts Master 😉

HTML – Form Tag in HTML with Examples

Form Tag in HTML

A html form is used to collect data or information from a web page or website.

Data collected under its control can be automatically submitted to a web server. Creating interactive websites for the internet requires capturing user input and processing it.

Captures the user’s input. A form element is enclosed in tags. HTML objects commonly used between tags are ‘text’, ‘password’, ‘buttons’, ‘check box’, ‘radio’, ‘reset’, ‘submit’, ‘hidden’, ‘select’, and ‘text area’. 

All form elements are accessible and their properties can be manipulated to control the functionality of the form at runtime. A form element has properties such as Name, Method, and Action.

Name: it will take the user name as a field.

Method: It will be used to send data captured from different pages. It can be done with Post or Get method. By default, it will take the get method as on the form.

Action:  It will point to the address of the program where the server will process the data. Here it may use serverside scripting languages like ASP, PHP, or JSP.

<form name="form1" method="post" action="submit.php></form>

List of Form Elements/Properties

Elements are used with properties, and properties are defined according to the elements to be used.

  • Input – <input><input> tag will be used within the <form></form> tags.
    • Text:
<input type="text">
    • Password:
<input type="password">
    • Button:
<input type="button">
    • Checkbox:
<input type="checkbox">
    • Radio:
<input type="radio">
    • Reset:
<input type="reset">
    • Submit:
<input type="Submit">
    • Hidden:
<input type="hidden">
    • Select:
<select> <option> option 1 </option> <option> option 2 </option> </select>
    • Text area:
<text area> text </text area>
    • File:
<input type="file">
Element Property
Text

Password

TextArea

Button

Radio

Check Box

Select

Submit

Reset

Hidden

File

 Name
Text

Password

TextArea

Button

Radio

Check Box

Select

Submit

Reset

Hidden

File

Select

 Value
Text

Password

TextArea

 Default Value
Radio

Check Box

 Checked
Radio

Check Box

 Default Checked
Radio Length
Radio Index
Select
Select Text

Examples

<input type="text" name="text1" value="search" size="20" maxlenght="64">
<input type="password" name="password" value="" size="20" maxlenght="20">
<textarea name="feedback" rows="20" cols="20"> Enter Feedback </textarea>
<input type="button" name="check" value="verify">
<input type="submit" name="btnsubmit" value="submit">
<input type="rest" name="btnreset" value="reset form">
<input type = “checkbox” name= “employed” value =”yes” checked>
<input type="radio" name="number" value="1" checked>
<select name = “items” size =”2” multiple> 
<option value = “French Fries” Selected> French fries 
<option value = “Hamburgers”> Hamburgers 
<option value = “HotDogs”> Hot Dogs 
</select>

In