Unit3 Notes

HTML <input type="search">
❮ HTML <input> type attribute
Example
Define a search field (like a site search, or Google search):
<label for="gsearch">Search Google:</label>

<input type="search" id="gsearch" name="gsearch">
Program:
<!DOCTYPE html>
<html>
<body>
<h1>Display a Search Field</h1>
<form action="/action_page.php">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
<input type="submit">
</form>
</body>
</html>
Output:
Definition and Usage
The <input type="search"> defines a text field for entering a search string.
HTML <input type="datetime-

local">
Example
Show a date and time control (no timezone) :
<label for="birthdaytime">Birthday (date and time):</label>

<input type="datetime-local" id="birthdaytime" name="birthdaytime">
Program:
<!DOCTYPE html>
<html>
<body>
<h1>Show a Date and Time Control</h1>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
</body>
</html>
Output:

The <input type="datetime-local"> defines a date picker.
The resulting value includes the year, month, day, and time.
HTML <input type="number">

Example
Define a field for entering a number (You can also set restrictions on what
numbers are accepted):
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
Program:
<!DOCTYPE html>
<html>
<body>
<h1>Display a Number Field</h1>
</form>
</body>
</html>
Output:

The <input type="number"> defines a field for entering a number.
Use the following attributes to specify restrictions:
 max - specifies the maximum value allowed

 min - specifies the minimum value allowed
 step - specifies the legal number intervals
 value - Specifies the default value
HTML <input type="range">
Example
Define a range control (like a slider control):
<label for="points">Points (between 0 and 10):</label>

<input type="range" id="points" name="points" min="0" max="10">
Program:
<!DOCTYPE html>
<html>
<body>
<h1>Display a Range Field</h1>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
</body>
</html>
Output:
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 attributes below.

 HTML <input type="color">

Example
Show a color picker (with a predefined red value):
<label for="favcolor">Select your favorite color:</label>

<input type="color" id="favcolor" name="favcolor" value="#ff0000">
Example:
<!DOCTYPE html>
<html>
<body>
<h1>Show a Color Picker</h1>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor"

value="#ff0000"><br><br>
</form>
</body>
</html>
Output:
 Definition and Usage

 The <input type="color"> defines a color picker.
 The default value is #000000 (black). The value must be in seven-

character hexadecimal notation.
HTML <input> required Attribute

HTML <input> tag
Example
An HTML form with a required input field:
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The input required attribute</h1>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
</body>
</html>
Output:
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting
the form.
Note: The required attribute works with the following input types: text, search,
url, tel, email, password, date pickers, number, checkbox, radio, and file.
HTML Global Attributes

The global attributes are attributes that can be used with all HTML elements.
Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
class Specifies one or more classnames for an element (refers to a

class in a style sheet)
contenteditable Specifies whether the content of an element is editable or

not
data-* Used to store custom data private to the page or application

dir Specifies the text direction for the content in an element
draggable Specifies whether an element is draggable or not
hidden Specifies that an element is not yet, or is no longer, relevant
id Specifies a unique id for an element
lang Specifies the language of the element's content
spellcheck Specifies whether the element is to have its spelling and

grammar checked or not
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
title Specifies extra information about an element
translate Specifies whether the content of an element should be

translated or not
HTML
<input> placeholder Attribute
❮ HTML <input> tag
Example
A telephone input field with a placeholder text:
<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}"><br><br>
<small>Format: 123-45-678</small><br><br>
</form>
Ex:
<!DOCTYPE html>
<html>
<body>
<h1>The input placeholder attribute</h1>
<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}"><br><br>
<small>Format: 123-45-678</small><br><br>
</form>
</body>
</html>
o/p:
The placeholder attribute specifies a short hint that describes the expected
value of an input field (e.g. a sample value or a short description of the
expected format).
The short hint is displayed in the input field before the user enters a value.
Note: The placeholder attribute works with the following input types: text,
search, url, tel, email, and password.
How TO - Turn Off Autocomplete

For Input
Turn Off Autocomplete
Use the autocomplete attribute to turn off autocomplete for input fields:
Example
<input type="text" autocomplete="off">
You can also turn off autocomplete for the whole form:
Example
<form autocomplete="off">
Ex:
<!DOCTYPE html>
<html>
<body>
<h2>Autocomplete on/off</h2>
First name: <input type="text" name="fname" autocomplete="off"><br>
Last name: <input type="text" name="lname" autocomplete="on"><br>
</form>
<p>Fill in and submit the form, then reload the page to see how
autocomplete works.</p>
<p>Notice that autocomplete is "on" for the last name field, but "off" for
the first name field.</p>
</body>
</html>
o/p:
Restricting values
HTML <input type="number">
Example
Define a field for entering a number (You can also set restrictions on what
numbers are accepted):


The <input type="number"> defines a field for entering a number.
Use the following attributes to specify restrictions:


Unit3 Notes

Uploaded by

Copyright:

Available Formats

Unit3 Notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit3 Notes

Uploaded by

Copyright:

Available Formats

HTML <input type="search">

❮ HTML <input> type attribute

<label for="gsearch">Search Google:</label>

<h1>Display a Search Field</h1>

HTML <input type="datetime-

<label for="birthdaytime">Birthday (date and time):</label>

<h1>Show a Date and Time Control</h1>

<input type="datetime-local" id="birthdaytime" name="birthdaytime">

Definition and Usage

HTML <input type="number">

<h1>Display a Number Field</h1>

<label for="quantity">Quantity (between 1 and 5):</label>

<input type="number" id="quantity" name="quantity" min="1" max="5">

Definition and Usage

Use the following attributes to specify restrictions:

 max - specifies the maximum value allowed

<label for="points">Points (between 0 and 10):</label>

<h1>Display a Range Field</h1>

<label for="vol">Volume (between 0 and 50):</label>

<input type="range" id="vol" name="vol" min="0" max="50">

 max - specifies the maximum value allowed

 HTML <input type="color">

<label for="favcolor">Select your favorite color:</label>

<h1>Show a Color Picker</h1>

<input type="color" id="favcolor" name="favcolor"

 Definition and Usage

 The default value is #000000 (black). The value must be in seven-

HTML <input> required Attribute

<h1>The input required attribute</h1>

<input type="text" id="username" name="username" required>

HTML Global Attributes

accesskey Specifies a shortcut key to activate/focus an element

class Specifies one or more classnames for an element (refers to a

contenteditable Specifies whether the content of an element is editable or

data-* Used to store custom data private to the page or application

draggable Specifies whether an element is draggable or not

hidden Specifies that an element is not yet, or is no longer, relevant

id Specifies a unique id for an element

lang Specifies the language of the element's content

spellcheck Specifies whether the element is to have its spelling and

style Specifies an inline CSS style for an element

tabindex Specifies the tabbing order of an element

title Specifies extra information about an element

translate Specifies whether the content of an element should be

<h1>The input placeholder attribute</h1>

<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-

How TO - Turn Off Autocomplete

<label for="quantity">Quantity (between 1 and 5):</label>

Definition and Usage

Use the following attributes to specify restrictions:

 max - specifies the maximum value allowed

You might also like