Web Development

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">
ElementProperty
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
RadioLength
RadioIndex
Select
SelectText

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>

Tuts

About Author

Tutsmaster.org provides tutorials related to tech and programmings. We are also setting up a community for the users and students.

You may also like

HTML introduction
Web Development

HTML – Introduction, History & Syntax

  • December 21, 2019
So, first of all, I would like to ask a question for the first time when you heard this term
html heading tag
Web Development

HTML – Heading Tag With Syntax

  • December 21, 2019
A heading tag is one of the most important tags we focus on in HTML or web development because, without