Welcome to Our Free Tutorial!

HTML Forms

HTML - Input HTML- Text Fields HTML- Passowrd HTML- CheckBox HTML- Radio
HTML- Textarea HTML - Upload HTML- Select HTML- Submit HTML- Reseat
HTML- Hidden Fields

HTML forms are used to save data to a server.A form contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.

The <form> tag is used to create HTML form:
<form>
.
input elements
.
</form>

The HTML- Input Element:-

It is most important form element is the input element. The input element is used to select user information.
The input element can be type text field, checkbox, password, radio button, submit button and more.

HTML Text Fields

<input type="text"/> specify a one line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"/><br/>
Last name: <input type="text" name="lastname" /><br /> </form>

Result:

First Name:

Last name:
The default width of the text is 20 characters.

HTML Password Field:-

<input type="password" /> specifies a password field:
<form>
Password: <input type="password" name="ipwd" />
</form> 

Result:

Password:
character of the by default password field are masked shown as asterisks or circles.

HTML Radio Buttons:-

<input type="radio" /> specify a radio button. Radio buttons are used for when you want the user to select one option.
<form>
<input type="radio" name="sex" value="Male" /> Male <br />
<input type="radio" name="sex" value="Female" /> Female
</form>

Result:

Male
Female

HTML Checkboxes:-

<input type="checkbox" /> Checkboxes are similar to radio buttons, but enable the user to make multiple selections. Checkboxes a user select ONE or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="Cricket" value="Cricket" /> I like to play cricket <br />
<input type="checkbox" name="News Paper" value="News" /> I like to read news paper <br />
</form>

Result:

I like to play cricket.
I like to read news paper.

HTML - Select Lists:-

A select list is a dropdown list with options. User select only one option from a list.
<Select>
<option value ="India">India </option>
<option value ="Nepal">Nepal </option> <option value ="Sri Lanka"> Sri Lanka </option>
<option value ="Bangladesh"> Bangladesh </option>
</select>

Result:

HTML - Submit Button :-

<input type="submit" /> specify a submit button.

Submit button is a button which is send data to a server. The data is sent to the page specified in the form of action attribute.

<form name="input" action="savedata.aspx" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Result:

Username:

If you type some character into the text box and click the submit button the browser send the input to your page called “savedata.aspx” the page show you the input.

  • Get (the form data is appended to the URL when submitted)
  • Post (the form data is not appended to the URL)

HTML - Upload Forms

Use an upload form to allow users to upload pictures, movies, or even their on web pages. Upload form is simply set the type attribute to file.

Html code:

<input type="file" />

Output:

Max File Size

To limit the size of the file being uploaded and saving you webserver space. Use a hidden input field and set attributes.

<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="file" />

Output:

HTML Reset Buttons

Reset buttons exist to reset the fields of your form.

HTML Code

<input type="reset" value="Reset" />
<input type="reset" value="Start Over" />

Output

HTML Code:

<form action="form1.html" method="post">
<input type="text" size="12" maxlength="12" />
<input type="text" size="24" maxlength="24" />
<input type="reset" value="Reset" />
</form>

Output:


HTML Hidden Fields:

There is no display of your hidden field in the box.

HTML Name and Value

<input type="hidden" id="age" name="age" value="25" />
<input type="hidden" id="DOB" name="DOB" value="02/02/80" />
<input type="hidden" id="admin" name="admin" value="1" />