Scribd
Upload
9 views

CMA (Form+input Elements)

The document discusses various HTML form elements including <input>, <textarea>, <select>, <button>, <fieldset>, and <legend>. It describes their purpose and provides examples of how to use each element in HTML forms.

Uploaded by

minakshisutar98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

CMA (Form+input Elements)

The document discusses various HTML form elements including <input>, <textarea>, <select>, <button>, <fieldset>, and <legend>. It describes their purpose and provides examples of how to use each element in HTML forms.

Uploaded by

minakshisutar98
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

The <input> Element

The HTML <input> element is the most used form element.


An <input> element can be displayed in many ways, depending on
the type attribute.

The <form> element is a container for different types of input elements,


such as:
1. Text box (<input type=“text”>):single line of text
2. Text area(<textarea></textarea>) : big textbox
3. Radio button(<input type=“radio” name=“gen”>) :only one
selection
4. Checkbox (<input type=“checkbox”>) : multiple selection
5. Button(<input type=“button” value=“login”>)
6. Submit button(<input type=“submit”>)

1. Textbox: it is used to enter only single line of text and not able to enter multiple line of text. And we
can use textbox in the form by using <input> tag and type attribute.

<form>
Username : <input type=”text”>
Password : <input type=”text”>
</form>

2. Textarea : it is used to enter multiple line of text and we can enter multiple lines in this input type ,

Address : <textarea> </textarea>

3. Radio button : It is used to select only one option from the list of options either 1 option or second
option but not able to select both the options.

Gender : <input type=”radio” name=”gender”>Male


<input type=”radio” name=”gender”>Female

4. Check box : it is used to select multiple items from the list of elements.

<input type=”checkbox”>BCA4<br>
<input type=”checkbox”>MCA<br>
<input type=”checkbox”>Mtech<br>
<input type=”checkbox”>BE
5. Button(Command Button) : it is used to click then button

<input type=”button” value=”login”>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

6. Submit button : it is used to submit the data entered by the user to the server after entering all the data
the form will be empty.

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

Attributes of <Form> tag


1. Action: it indicates after entering all the data where the information should store.
2. Target : it indicates after entering all the information where the response or output will display
Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the


window

3. Method :
4. Autocomplete (is on or off)
The autocomplete attribute specifies whether a form should have auto complete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user
has entered before.

5. no validate
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when submitted.
Example
A form with a novalidate attribute:
<form action="/action_page.php" novalidate>

The HTML <form> Elements


1.<input>: it contains various input elements.
2.<label> : used to give the label for the element.
3.<select> : also called as drop down list
4.<textarea> : big textbox
5.<button>(<button type=”button”>CLICK ME
6.<fieldset>
7.<legend>
8.<datalist>
9.<output>
10.<option> : same as<select> drop down list.
11.<optgroup>

3. The <select> Element

The <select> element defines a drop-down list:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size=”3” multiple>
<option value="Volvo">Volvo</option>
<option value="Maruti 800"> Maruti 800</option>
<option value="fiat">Fiat</option>
<option value="Audi">Audi</option>
</select>
4. <Textarea> : it is a big textbox used to enter multiple line of text.
Address : <textarea></textarea>
5.<Button>: it is used to add button in the web page.
<button type=”button” onclick=”alert(‘hi welcome’)”>CLICK ME
6.<Fieldset> & <legend> : it is used to organise the data and elements.
<fieldset>
<legend>PERSONAL DATA</legend>
Firstname : <input type=”text”>
Lastname : <input type=”text”>
DOB:<input type=”date”>
</fieldset>

7.<datalist> : same as <select> drop down list.


8.<optgroup> : is

You might also like