Scribd
Upload
18 views48 pages

Form L14

The document describes various HTML <input> types such as text, password, submit, reset, button, color, date, datetime-local, email, file, hidden and more. Each type is used for a specific purpose, for example text for single-line input, password for masked text, submit to send form data, and hidden to include hidden data on form submit. Examples are provided to demonstrate the usage of each type.

Uploaded by

Nakul Bhar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views48 pages

Form L14

The document describes various HTML <input> types such as text, password, submit, reset, button, color, date, datetime-local, email, file, hidden and more. Each type is used for a specific purpose, for example text for single-line input, password for masked text, submit to send form data, and hidden to include hidden data on form submit. Examples are provided to demonstrate the usage of each type.

Uploaded by

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

HTML input types

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">
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>
Text Fields: Example
<!DOCTYPE html>
<html>
<body>

<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

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


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

</body>
</html>
Input Type Password

• <input type="password"> defines a password


field.
• The characters in a password field are masked
(shown as asterisks or circles).
Input Type Password: Example
<!DOCTYPE html>
<html>
<body>

<h2>Password field</h2>

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

<form action="/action_page.php">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
</form>

<p>The characters in a password field are masked (shown as asterisks or circles).</p>

</body>
</html>
Input Type Submit

• <input type="submit"> defines a button


for submitting form data to a form-handler.
• The form-handler is typically a server page
with a script for processing input data.
• The form-handler is specified in the
form's action attribute.
Input Type Submit: Example
<!DOCTYPE html>
<html>
<body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

<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 "Submit", the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>
Input Type Reset
• <input type="reset"> defines a reset
button that will reset all form values to their
default values.
Input Type Reset: Example
<!DOCTYPE html>
<html>
<body>

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that resets all form values to their default values:</p>

<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">
<input type="reset">
</form>

<p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p>

</body>
</html>
Input Type Button
• <input type="button"> defines a button:
Input Type Button: Example
<!DOCTYPE html>
<html>
<body>

<h2>Input Button</h2>

<input type="button" onclick="alert('Hello World!')" value="Click


Me!">

</body>
</html>
Input Type Color
• The <input type="color"> is used for input
fields that should contain a color.
• Depending on browser support, a color picker
can show up in the input field.
Input Type Color: Example
<!DOCTYPE html>
<html>
<body>

<h2>Show a Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<form action="/action_page.php">
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
<input type="submit" value="Submit">
</form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).</p>

</body>
</html>
Input Type Date
• The <input type="date"> is used for input
fields that should contain a date.
• Depending on browser support, a date picker
can show up in the input field.
Input Type Date: Example
<!DOCTYPE html>
<html>
<body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>

<form action="/action_page.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11 or prior Safari 14.1.</p>

</body>
</html>
Min and max attribute
<!DOCTYPE html>
<html>
<body>

<h2>Date Field Restrictions</h2>

<p>Use the min and max attributes to add restrictions to dates:</p>

<form action="/action_page.php">
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

<label for="datemax">Enter a date before 1980-01-01:</label>


<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

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


</form>

<p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11 or prior Safari 14.1.</p>

</body>
</html>
Input Type Datetime-local
• The <input type="datetime-local"> specifies a
date and time input field, with no time zone.
• Depending on browser support, a date picker
can show up in the input field.
Input Type Datetime-local: Example
<!DOCTYPE html>
<html>
<body>

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no
time zone.</p>

<form action="/action_page.php">
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="datetime-local" is not supported in Internet Explorer 11 or prior


Safari 14.1.</p>

</body>
</html>
Input Type Email
• The <input type="email"> is used for input
fields that should contain an e-mail address.
• Depending on browser support, the e-mail
address can be automatically validated when
submitted.
• Some smartphones recognize the email type,
and add ".com" to the keyboard to match
email input.
Input Type Email: Example
<!DOCTYPE html>
<html>
<body>

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for input fields that should contain
an e-mail address:</p>

<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>

</body>
</html>
Input Type Image
• The <input type="image"> defines an image as
a submit button.
• The path to the image is specified in
the src attribute.
Input Type Image: Example
<!DOCTYPE html>
<html>
<body>

<h2>Display an Image as the Submit button</h2>

<form action="/action_page.php">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name: </label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click that activated the image
button.</p>

</body>
</html>
Input Type File
• The <input type="file"> defines a file-select
field and a "Browse" button for file uploads.
Input Type File: Example
<!DOCTYPE html>
<html>
<body>

<h1>File upload</h1>

<p>Show a file-select field which allows a file to be chosen for upload:</p>


<form action="/action_page.php">
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
Input Type Hidden
• The <input type="hidden"> defines a hidden
input field (not visible to a user).
• A hidden field lets web developers include
data that cannot be seen or modified by users
when a form is submitted.
• A hidden field often stores what database
record that needs to be updated when the
form is submitted.
Input Type Hidden: Example
<!DOCTYPE html>
<html>
<body>

<h1>A Hidden Field (look in source code)</h1>

<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> The hidden field is not shown to the user, but the data is sent when the form is
submitted.</p>

</body>
</html>
Input Type Month
• The <input type="month"> allows the user to
select a month and year.
• Depending on browser support, a date picker
can show up in the input field.
Input Type Month: Example
<!DOCTYPE html>
<html>
<body>

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>

<form action="/action_page.php">
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11.</p>

</body>
</html>
Input Type Number
• The <input type="number"> defines
a numeric input field.
• You can also set restrictions on what numbers
are accepted.
Input Type Number: Example
<!DOCTYPE html>
<html>
<body>

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input field.</p>

<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>

<form action="/action_page.php">
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
<input type="submit" value="Submit">
</form>

</body>
</html>
Input Type Range
• The <input type="range"> defines a control for
entering a number whose exact value is not
important (like a slider control). Default range
is 0 to 100. However, you can set restrictions
on what numbers are accepted with
the min, max, and step attributes:
Input Type Range: Example
<!DOCTYPE html>
<html>
<body>

<h2>Range Field</h2>

<p>Depending on browser support: The input type "range" can be displayed as a slider
control.</p>

<form action="/action_page.php" method="get">


<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<input type="submit" value="Submit">
</form>

</body>
</html>
Input Type Search
• The <input type="search"> is used for search
fields (a search field behaves like a regular text
field).
Input Type Search: Example
<!DOCTYPE html>
<html>
<body>

<h2>Search Field</h2>
<p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text
field):</p>

<form action="/action_page.php">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit" value="Submit">
</form>

</body>
</html>
Input Type Tel
• The <input type="tel"> is used for input fields
that should contain a telephone number.
Input Type Tel: Example
<!DOCTYPE html>
<html>
<body>

<h2>Telephone Field</h2>

<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>

<form action="/action_page.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"
required><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
Input Type Time
• The <input type="time"> allows the user to
select a time (no time zone).
• Depending on browser support, a time picker
can show up in the input field.
Input Type Time: Example
<!DOCTYPE html>
<html>
<body>

<h1>Show a Time Input Control</h1>

<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>

<p>If the browser supports it, a time picker pops up when entering the input field.</p>

<form action="/action_page.php">
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="time" is not supported in Internet Explorer 11 or prior Safari 14.1.</p>

</body>
</html>
Input Type Url
• The <input type="url"> is used for input fields
that should contain a URL address.
• Depending on browser support, the url field
can be automatically validated when
submitted.
• Some smartphones recognize the url type, and
adds ".com" to the keyboard to match url
input.
Input Type Url: Example
<!DOCTYPE html>
<html>
<body>

<h1>Display a URL Input Field</h1>

<p>The <strong>input type="url"</strong> is used for input fields that should contain a URL
address:</p>

<form action="/action_page.php">
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
<input type="submit" value="Submit">
</form>

</body>
</html>
Input Type Week
• The <input type="week"> allows the user to
select a week and year.
• Depending on browser support, a date picker
can show up in the input field.
Input Type Week: Example
<!DOCTYPE html>
<html>
<body>

<h1>Display a Week Input Control</h1>

<p>The <strong>input type="week"</strong> allows the user to select a week and year.</p>

<p>If the browser supports it, a date picker pops up when entering the input field.</p>

<form action="/action_page.php">
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
<input type="submit" value="Submit">
</form>

<p><strong>Note:</strong> type="week" is not supported in Firefox, Safari or Internet Explorer 11.</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.
Radio Buttons: Example
<!DOCTYPE html>
<html>
<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</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.
Checkboxes:Example
<!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.
The Submit Button: Example
<!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