PBA INSTITUTE

INPUT TAG

The <input> element in HTML is a versatile tool used to create interactive controls for web forms. It's a self-contained tag that doesn't have a closing tag, and its behavior is defined by various attributes, especially the type attribute, which determines the type of input control it creates.
Here's an overview of the <input> element's attributes and how they are commonly used:

1. type: This attribute specifies the type of input control to display. Some common values include:
i. text : A single-line text input field.
ii. password : A password input field (text is masked).
iii. checkbox : A checkbox for selecting one or more options.
iv. button : A generic button.
v. radio : A radio button for selecting one option from a group.
vi. submit : A submit button to submit a form.
vii. reset : A reset button to reset form fields to their initial values.
viii. file : A file input field for uploading files.

3. placeholder:This attribute provides a hint to the user about what information is expected in the input field. It typically appears as faint text when the input field is empty.

Example:

Example-1

													
													
<!DOCTYPE html>
<html>
<head>
  	<title></title>
</head>
<body>
<form>
	First name: <input type="text" name="FirstName" value="Namita"><br>
	Last name: <input type="text" name="LastName" value="Pal"><br>
	<input type="submit" value="Submit">
</form>
</body>
</html>
													
													
												

Output :

First name:
Last name:

In this example,

i. Name:This attribute specifies the name of the input control. When a form is submitted, the data entered into the input field is sent to the server with the name as the key.

ii. value: This attribute specifies the initial value of the input field. For text inputs, it sets the default text. For checkboxes and radio buttons, it defines the value that gets submitted when the input is checked.

Example-2

													
													
<!DOCTYPE html>
<html>
<head>
  	<title></title>
</head>
<body>
	<form>
	FIRST NAME:
	<input id="firstname" type="text"> <br>
	LAST NAME:
	<input id="last name" type="text"> <br>
	<input type="checkbox" name="check"> Set Google as my default
	homepage.<br>
	<input value="Send" type="submit">
	<input type="reset">
	</form>
</body>
</html>
													
													
												

Output :

FIRST NAME:
LAST NAME:
Set Google as my default homepage.

In this example,

i. id: This attribute specifies a unique identifier for the input control. It's useful for associating a <label> element with the input using the for attribute.

Example-3

													
												
<!DOCTYPE html>
<html>
<body>
  	<form>
 		<label for="fname">First name:</label>
  		<input type="text" id="fname" name="fname"><br>
  		<label for="lname">Last name:</label>
  		<input type="text" id="lname" name="lname"><br>
  		<label for="email">Email:</label>
  		<input type="email" id="email" name="email"><br>
  		<label for="birthday">Birthday:</label>
  		<input type="date" id="birthday" name="birthday"><br>
  		<input type="submit" value="Submit">
	</form> 
</body>
</html>
													
													
												

Output :

In this emaple,The <label> tag in HTML is used to define a label for an <input>, <select>, <textarea>, or <button> element. It provides a clickable area that focuses on the associated form element when clicked.

Conclusion :

In HTML, the conclusion of a form is denoted by the closing tag </form>, marking the end of the form's content and delineating its boundaries. Similarly, each input element within the form necessitates a closing tag, such as </input> or </textarea>, depending on the input type. These tags ensure proper structure and functionality of the form by defining the boundaries of each input field and their respective data. Properly enclosing the form and input tags is essential for maintaining the integrity of the HTML document and facilitating accurate data submission and processing within the web application or page.

INPUT TAG

Example:

Conclusion :

HTML All Topics

SHARE