Scribd
Upload
47 views

Input Tag: Type Description

The <input> element is used to create interactive controls for web-based forms. Some common <input> element types include: - <input type="text"> which creates a single-line text field - <input type="radio"> which allows the user to select one option from multiple choices - <input type="checkbox"> which allows the user to select zero or more options from multiple choices - <input type="submit"> which creates a button to submit the form data.

Uploaded by

Abhi
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
47 views

Input Tag: Type Description

The <input> element is used to create interactive controls for web-based forms. Some common <input> element types include: - <input type="text"> which creates a single-line text field - <input type="radio"> which allows the user to select one option from multiple choices - <input type="checkbox"> which allows the user to select zero or more options from multiple choices - <input type="submit"> which creates a button to submit the form data.

Uploaded by

Abhi
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/ 6

INPUT TAG

The <input> Element

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one


of many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or


more of many choices)

<input type="submit"> Displays a submit button (for submitting


the form)

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

An <input> element can be displayed in many ways, depending on


the type attribute.

Here are some examples:


Text Fields

The <input type="text"> defines a single-line input field for text input.

<!DOCTYPE html>

<html>

<body>

<h2>Text input fields</h2>

<form>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe">

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body>

</html>
Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<form>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>

</form>

</body>

</html>
Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of


choices.

<!DOCTYPE html>

<html>

<body>

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

<label for="vehicle1"> I have a bike</label><br>

<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">

<label for="vehicle2"> I have a car</label><br>

<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">

<label for="vehicle3"> I have a boat</label><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>
The Submit Button

The <input type="submit"> defines a button for submitting the form data to a


form-handler.

The form-handler is typically a file on the server with a script for processing
input data.

The form-handler is specified in the form's action attribute.

<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><br>

<input type="submit" value="Submit">

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>

</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy