Home    Forms Controls in HTML5 | HTML Form Elements - EDUCATION STUDY CLUB

EDUCATION STUDY CLUB

Main Menu

Forms Controls in HTML5 | HTML Form Elements

HTML 5
111
0
Share:

Form controls | Elements: A form is a collection of different elements also called as controls like textbox, radio button, checkbox, submit button and many more.

forms controls in html5

The <Input> tag

The <Input> tag is used to specify the different types of controls by using type attribute. Syntax of using <Input> with type attribute is;

Type of Control:

Text: Creates a one line textbox

<Input type = “text”>

Radio: Creates a radio button. The radio button allows one option selection against multiple choices.

<Input type = “radio”>

Checkbox: Creates a checkbox. It allows more than one selection against multiple choices.

<Input type =”checkbox”>

Password: The password input type is used to create text contents in the form of ‘*’ asterik or ‘•’ disc.

<Input type = “password”>

Submit: Displays a button for submitting the form data to a server.

<Input type =”submit”>

Reset: The reset control clears the text content entered in the form.

<Input type = “reset”>

Button: It displays push button which activates on events.

<Input type =”button”>

Attributes of <Input>: Apart from type attribute, there are attributes which are specific to a particular type of controls. The following table specifies the description.

Type: It describes, the name of the control like text radio etc. eg. type = “radio”

Name:  Each input field must have a name. The name attribute is a user defined value. If

the name attribute is not specified, the data of that input field will not get submitted.

Maxlength: This attribute is used with text and password type. It specifies the maximum

number of characters which can be entered in a text or password box.

Size: The ‘Size’ attribute can be used with text and password type. It specifies the width of the text box.

Checked: The ‘Checked’ attribute specifies the default selection for options in a checkbox or radio button.

Value: The ‘Value’ attribute can be used with text, checkbox, radio, submit or reset.

  • When used with text type it specifies default value in a text box.
  • For checkbox and radio. It defines value which is sent on submit.

<Textarea> tag : The <textarea> is used to create a textbox with multiple lines. The number of lines and width of the textbox are specified by using rows and cols attribute respectively. The <textarea> can have following attributes.

name : It is used to specify name for the textarea. For example name =”ta1″.

rows : It specifies the number of lines in a textarea. For example rows = “5”

cols : It specifies the width of a text area.

maxlength : It specifies the maximum number of characters allowed in the

textarea.

placeholder : It specifies a short hint that describes the expected value of a textarea. For example placeholder = “your address”

required : It specifies that textarea must be filled out. i.e. It cannot be

blank.

Syntax :

<textarea name = “tal” rows = “5” cols = “30” placeholder = “your address”

required> </textarea>

<Select> tag : <select> tag is used. to create drop-down list.

The attributes of <select> tag are:

1) Name – Assigns name to the control.

2) Multiple – It allows the user to select more than one value.

3) Size – The size attribute is used to specify the number of visible values.

 

The <option> tag inside the <select> tag defines the available options in

the list. The attributes of <option> tag are :

1) selected : To define preselected option, ‘selected’ attribute is

added to the <option>

2) value : It assigns value to the option specified in the dropdown list.

Example | Program:

<!DOCTYPE html>

<html>

<head><title>Form with Input elements</title></head>

<body bgcolor=”orange”>

<h1>use of form</h1>

<form >

Enter your name <input type=”text” Name=”n1″ maxlength=”20″><Br>

Enter your standard : <input type =”radio” name=”r1″ value=”11″> 11<sup>th</sup>

<input type=”radio” name=”r1″ value=”12″>12<sup>th </sup><br> Choose your optional subjects : <br>

<input type=”checkbox” name=”c1″ Value=”Hindi”>Hindi<br>

<input type=”checkbox” name=”c2″ Value=”German”>German<br>

<input type=”checkbox” name=”c3″ Value=”Biology”>Biology<br>

<input type=”checkbox” name=”c4″ Value=”IT”>IT<br> <input type=”submit” value=”Submit”><br>

</form></body></html>

 

Example | Program:

<!DOCTYPE html>

<html>

<head><title> Form elements and textarea </title></head>

<body bgcolor = “cyan” text =”Red”>

<h1> Use of form elements </h1>

<form method = “post” action = “data.php”>

Enter your name: <input type = “text” name = “fn”> <br>

Select your city : <select name=”ct”>

<option>Pune</option>

<option>Nagpur</option>

<option>Solapur</option>

</select><br>

Enter your address: <textarea name = “address” rows = “3” cols = “30” placeholder = “your address” required> </textarea> <br>

<input type = “submit” value = “send”>

</form></body> </html>

Web Title: forms controls in html5

Share:
Previous Article

Forms in HTML5 | Forms Example

Next Article

TYPES OF SEO

Related articles

Leave a reply

© Copyright "Education Study Club" All rights reserved.
error: Content is protected !!
Home