Scribd
Upload
8 views5 pages

Form Elements or Tags

The document explains the creation of forms using HTML elements such as labels, input fields, and buttons. It details the functionality of different input types, including text, password, submit, reset, and button, along with their syntax and attributes. Additionally, it provides examples of HTML code for implementing a user information form and a login form.

Uploaded by

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

Form Elements or Tags

The document explains the creation of forms using HTML elements such as labels, input fields, and buttons. It details the functionality of different input types, including text, password, submit, reset, and button, along with their syntax and attributes. Additionally, it provides examples of HTML code for implementing a user information form and a login form.

Uploaded by

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

Form Elements or tags

Form is created or designed using form elements or tags


Form elements are used for creating UI (User interface).

Label
Label is used for creating caption for input element
Label is used to identify input element (OR) data.

Syntax:
<label for=”name”>text</label>

Name is used to identify the label.


This name is used as an id for input element.
By clicking on label, the input element can focused using linking
with id.

Input

HTML5 supports various types of input elements or types.

<input type=text name=”name” id=”id of label”>

It is used to input text.


Value inside input field is identified with name.

Submit, Reset, Button


HTML 5.0 provides 3 types of buttons

1. Submit button

This button is having predefined functionality. When end user


click on submit button the form data is submitted to given url.
(OR) when end user clicks on submit button action is performed.

Syntax:
<input type=”submit” value=”text”>

Value is used to change display text, the default display text form
input type submit is submit.

2. Reset button

This button is having predefined functionality. When end user


click on reset button the form data is cleared.

Syntax:
<input type=”reset” value=”text”>

3. Button

Input button does not have any predefined functionality. This


functionality must be defined by programmer using java script.

Syntax:
<input type=”button” value=”text” onclick=function>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
fieldset
{
font-size: 20px;
font-weight: bold;
padding:50px;
}
label {
border: 1px solid black;
color:blue;
}
.s {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
background-color: aqua;
color:red;
border-color: blueviolet;
border-radius: 15px;
width: 150px;

}
</style>
</head>
<body>
<form action="index.html">
<fieldset>
<legend>User Information</legend>
<label for="uname">UserName</label>
<input type="text" name="uname" id="uname"><br><br>
<label for="name">Name</label>
<input type="text" name="name" id="name"><br><br>
<input type="submit" value="Login" class="s">
<input type="reset" value="clear" class="s">
<input type="button" value="validate" class="s">
</fieldset>
</form>
</body>
</html>

<input type=”password”>

This input type used to input password values. The content input
inside password field is not visible.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Login Form</title>
<style>
</style>
</head>
<body>
<form>
<table border="1" width="80%">
<caption>Login</caption>
<tr>
<td><label for="uname">UserName</label></td>
<td><input type="text" name="uname" id="uname"
required></td>
</tr>
<tr>
<td><label for="pwd">Password</label></td>
<td><input type="password" name="pwd" id="pwd"
required></td>
</tr>
<tr>
<td><input type="submit"></td>
<td><input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>

Attribute
required : if this attribute is assigned to any input field, input is
required before submitting form.

You might also like