24 Jun 2017
Home  »  HTML • PHP   »   HTML Form Controls

HTML Form Controls

Posted in HTML, PHP By bestonetechnologies On June 24, 2017

HTML Form Controls

The following article describes different types of form controls that we can use in your form.

Text Input Fields

Text input field is a one line area that allow us to input text.

Example:

<html>
<form>
Username: <input type=”text” name=”txt_name”/>
</form>
</html>

Password Input Fields

Password input field is also a single line text input. The only difference is, it masks the character as the user enters it.

Example:

<html>
<form>
Password: <input type=”password” name=”txt_password”/>
</form>

Radio Buttons

Radio buttons allow user to select one option from a pre-defined set of options. Same name of the more then 1 radio button define it as a set and we can select only one of them.

Example:

<html>
<form>
Choose your course:
<input type=”radio” name=”course” value=”php”/> PHP
<input type=”radio” name=”course” value=”java”/> JAVA
<input type=”radio” name=”course” value=”asp”/> ASP
</form>
</html>

Checkbox

Checkbox is used when more than 1 option can be select.

Example:

<html>
<form>
Language known:
<input type=”checkbox” checked name=” language” value=”Hindi”/> Hindi
<input type=” checkbox” name=” language ” value=”English”/> English
<input type=” checkbox” name=” language ” value=”Punjabi”/> Punjabi
</form>
</html>

Select

A select box, is known as drop down box, in which user can select one or more options as per the attributes set in select. Size and multiple are the 2 important attributes of Select tag. Size is used to present a scrolling list box and multiple allows the user to select multiple items from the list.

Example 1 (Select Single):

<html>
<form>
<select>
<option value=”MCA” > MCA </option>
<option value=”BCA” selected > BCA </option>
<option value=”MSC-IT” > MSC-IT </option>
</select>
</form>
</html>

Example 2 (Select Multiple):

<html>
<form>
(Ctrl + Click To Select Multiple)
<select multiple multiple size=2>
<option value=”MCA” > MCA </option>
<option value=”BCA” selected > BCA </option>
<option value=”MSC-IT” > MSC-IT </option>
</select> (Ctrl + Click To Select Multiple)
</form>
</html>

Textarea

Textarea is used to give details that may contain text longer then a single line.

Example:

<html>
<form>
Description : <textarea rows=”6″ cols=”30″ name=”description”> </textarea>
</form>
</html>

Button

Button are use to perform some activity on web page, input type button defines a button on our web page. Mostly buttons are used to call and javaScript functions.

Example:

<html>
<form>
<input type=”button” name=”btnClickMe” value=”Button”/>
</form>
</html>

Input type Submit, Image and Reset

Below is an example of 3 types of input types:

  • Submit: Input type submit is used to submit the form on server, when we click on submit button inside the form, all the values of that form will submitted to the server.
  • Image: Input type image works same like a submit button, but we can add image in this input type.
  • Reset: Input type reset clear all the values of that form control and set defaults values.

Example:

<html>
<form>
Phone : <input type=”text” name=”phone”>
Pin : <input type=”text” name=”pin” >
<input type=”reset” value=”Reset”>
<input type=”submit” value=”Submit”>
<input type=”image” src=”http://bestonetechnologies.com/wp-content/uploads/2017/06/submit.png” alt=”Submit”>
</form>
</html>

Hidden

Input type hidden define a hidden field (not visible to a user). A hidden field often stores a default value, or can have its value changed by a JavaScript. Programmer use hidden fields to store values that they don’t want to show the general users.

Example:

<html>
<form>
<input type=”hidden” name=”userid” value=”1″/>
</form>
</html>

About Author

bestonetechnologies

I am a software developer.

Related Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.