css and Input attributes

• This chapter describes the different attributes
for the HTML <input> element.
1. The value Attribute
• The input value attribute specifies an initial
value for an input field:
2. The readonly Attribute
• The input readonly attribute specifies that an
input field is read-only.
• A read-only input field cannot be modified
(however, a user can tab to it, highlight it, and
copy the text from it).
• The value of a read-only input field will be sent
when submitting the form!

3.The disabled Attribute
• The input disabled attribute specifies that an
input field should be disabled.
• A disabled input field is unusable and un-
clickable.
• The value of a disabled input field will not be
sent when submitting the form!

• 4. The size Attribute
• The input size attribute specifies the visible
width, in characters, of an input field.
• The default value for size is 20.
• Note: The size attribute works with the
following input types: text, search, tel, url,
email, and password.

<html> <body>
<h1>The input size attribute</h1>
<p>The size attribute specifies the width (in characters) of
an input field:</p>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4"><br><br>
<input type="submit" value="Submit">
</form> </body> </html>

5. The maxlength Attribute
• The input maxlength attribute specifies the maximum
number of characters allowed in an input field.
• Note: When a maxlength is set, the input field will not
accept more than the specified number of characters.
However, this attribute does not provide any feedback.
So, if you want to alert the user, you must write JavaScript
code.
• Example
• Set a maximum length for an input field:
• <form>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4"
size="4">
</form>

6.The min and max Attributes
• The input min and max attributes specify the minimum and
maximum values for an input field.
• The min and max attributes work with the following input
types: number, range, date, datetime-local, month, time and
week.
• Example
• Set a max date, a min date, and a range of legal values:
• <form>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" name="datemin" min="2000-01-
02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1
" max="5">
</form>

7. The multiple Attribute
• The input multiple attribute specifies that the
user is allowed to enter more than one value in
an input field.
• The multiple attribute works with the following
input types: email, and file.
• Eg:
• <input type="file" id="files" name="files"
multiple>

8. The pattern Attribute
• The input pattern attribute specifies a regular
expression that the input field's value is
checked against, when the form is submitted.
• The pattern attribute works with the
following input types: text, date, search, url,
tel, email, and password.

9. The placeholder Attribute
• The input placeholder attribute specifies
short a hint that describes the expected value
of an input field (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.
• The placeholder attribute works with the
following input types: text, search, url, tel,
email, and password.

• <label for="phone">Enter a phone
number:</label>
• <input type="tel" id="phone"
name="phone" placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

10. The required Attribute
• The input required attribute specifies that an
input field must be filled out before
submitting the form.
• The required attribute works with the
following input types: text, search, url, tel,
email, password, date pickers, number,
checkbox, radio, and file.

• <label for="username">Username:</label>
• <input type="text" id="username"
name="username" required>
• <input type="submit" value="Submit">

11The step Attribute
• The input step attribute specifies the legal
number intervals for an input field.
• Example: if step="3", legal numbers could be
-3, 0, 3, 6, etc.
• Tip: This attribute can be used together with
the max and min attributes to create a range
of legal values.
• The step attribute works with the following
input types: number, range, date, datetime-
local, month, time and week.

• <input type="number" id="points" name="point
s" step="3">
12. The autofocus Attribute
• The input autofocus attribute specifies that an
input field should automatically get focus when
the page loads.
• <input type="text" id="fname" name="fname" a
utofocus><br>
• Let the "First name" input field automatically get
focus when the page loads:

13. The list Attribute
• The input list attribute refers to a <datalist> element
that contains pre-defined options for an <input>
element.
14. The autocomplete Attribute
• The input autocomplete attribute specifies whether a
form or an input field should have autocomplete on
or off.
• Autocomplete allows the browser to predict the
value. When a user starts to type in a field, the
browser should display options to fill in the field,
based on earlier typed values.
• The autocomplete attribute works with <form> and
the following <input> types: text, search, url, tel,
email, password, datepickers, range, and color.

• What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be
displayed on screen, paper, or in other
media
• CSS saves a lot of work. It can control the
layout of multiple web pages all at once
• External stylesheets are stored in CSS files

• Why Use CSS?
• CSS is used to define styles for your web
pages, including the design, layout and
variations in display for different devices and
screen sizes.

Applications of CSS
• As mentioned before, CSS is one of the most widely used style
language over the web. I'm going to list few of them here:
• CSS saves time - You can write CSS once and then reuse same
sheet in multiple HTML pages. You can define a style for each
HTML element and apply it to as many Web pages as you want.
• Pages load faster - If you are using CSS, you do not need to write
HTML tag attributes every time. Just write one CSS rule of a tag
and apply it to all the occurrences of that tag. So less code means
faster download times.
• Easy maintenance - To make a global change, simply change the
style, and all elements in all the web pages will be updated
automatically.
• Superior styles to HTML - CSS has a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be
optimized for more than one type of device. By using the same
HTML document, different versions of a website can be presented
for handheld devices such as PDAs and cell phones or for printing.
• Global web standards -.

• Three Ways to Insert CSS
• There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
• External CSS
• With an external style sheet, you can change the
look of an entire website by changing just one
file!
• Each HTML page must include a reference to the
external style sheet file inside the <link>
element, inside the head section.

• Example
• External styles are defined within the <link> element,
inside the <head> section of an HTML page:
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

• An external style sheet can be written in any text
editor, and must be saved with a .css extension.
• The external .css file should not contain any HTML
tags.
• Here is how the "mystyle.css" file looks like:
• "mystyle.css"
• body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

• Internal CSS
• An internal style sheet may be used if one
single HTML page has a unique style.
• The internal style is defined inside the <style>
element, inside the head section.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

• Inline CSS
• An inline style may be used to apply a unique
style for a single element.
• To use inline styles, add the style attribute to
the relevant element. The style attribute can
contain any CSS property.

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a
heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

• CSS Colors
• The color property in CSS is used to set the
color of HTML elements. Typically, this
property is used to set the background color
or the font color of an element.
• In CSS, we use color values for specifying the
color. We can also use this property for the
border-color and other decorative effects.
• We can define the color of an element by
using the following ways:

1. RGB Format
• RGB format is the short form of 'RED
GREEN and BLUE' that is used for defining the
color of an HTML element simply by
specifying the values of R, G, B that are in the
range of 0 to 255.
• color: rgb(R, G, B);

2. RGBA Format
• It is almost similar to RGB format except
that RGBA contains A (Alpha) that specifies the
element's transparency. The value of alpha is in
the range 0.0 to 1.0, in which 0.0 is for fully
transparent, and 1.0 is for not transparent.
• Syntax
• color:rgba(R, G, B, A);

3. Hexadecimal notation
• Hexadecimal can be defined as a six-digit color
representation. This notation starts with the #
symbol followed by six characters ranges from 0 to F.
In hexadecimal notation, the first two digits represent
the red (RR) color value, the next two digits represent
the green (GG) color value, and the last two digits
represent the blue (BB) color value.
• The black color notation in hexadecimal is #000000,
and the white color notation in hexadecimal is
#FFFFFF
• Syntax
• color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

4. Short Hex codes
• It is a short form of hexadecimal notation in
which every digit is recreated to arrive at an
equivalent hexadecimal value.
• For example, #7B6 becomes #77BB66 in
hexadecimal.

5. HSL
• color:hsl(H, S, L);
6. HSLA
• color:hsla(H, S, L, A);
7. Built-in Color
• color: color-name;

CSS Font
• CSS Font property is used to control the look
of texts. By the use of CSS font property you
can change the text size, color, style and
more
• These are some important font attributes:

• CSS Font color: This property is used to change
the color of the text. (standalone attribute)
• CSS Font family: This property is used to change
the face of the font.
• CSS Font size: This property is used to increase
or decrease the size of the font.
• CSS Font style: This property is used to make the
font bold, italic or oblique.
• CSS Font variant: This property creates a small-
caps effect.
• CSS Font weight: This property is used to
increase or decrease the boldness and lightness
of the font.

• 1) CSS Font Color
• CSS font color is a standalone attribute
in CSS although it seems that it is a part of CSS
fonts. It is used to change the color of the text.
• There are three different formats to define a
color:
• By a color name
• By hexadecimal value
• By RGB

• 2) CSS Font Family
• CSS font family can be divided in two types:
• Generic family: It includes Serif, Sans-serif, and
Monospace.
• Font family: It specifies the font family name like Arial,
New Times Roman etc.
• Serif: Serif fonts include small lines at the end of
characters. Example of serif: Times new roman,
Georgia etc.
• Sans-serif: A sans-serif font doesn't include the small
lines at the end of characters. Example of Sans-serif:
Arial, Verdana etc.

3) CSS Font Size
CSS font size property is used to change the size of the font.
These are the possible values that can be used to set the font size:
Font Size Value Description
xx-small used to display the extremely small text size.
x-small used to display the extra small text size.
small used to display small text size.
medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.
xx-large used to display extremely large text size.
smaller used to display comparatively smaller text size.
larger used to display comparatively larger text size.
size in pixels or % used to set value in percentage or in pixels.

<p style="font-size:xx-small;">
This font size is extremely small.</p>
<p style="font-size:x-small;">
This font size is extra small</p>
<p style="font-size:small;">
This font size is small</p>
<p style="font-size:medium;">
This font size is medium. </p>
<p style="font-size:large;">
This font size is large. </p>

4. CSS Font Style
CSS Font style property defines what type of font you want to
display. It may be italic, oblique, or normal.
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>

• 5) CSS Font Variant
• CSS font variant property specifies how to set
font variant of an element. It may be normal and
small-caps.
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>

• 6) CSS Font Weight
• CSS font weight property defines the weight of the font
and specify that how bold a font is. The possible values of
font weight may be normal, bold, bolder, lighter or
number (100, 200..... upto 900).
• <p style="font-weight:bold;">This font is bold.</p>
• <p style="font-weight:bolder;">This font is bolder.</p>
• <p style="font-weight:lighter;">This font is lighter.</p>
• <p style="font-
weight:100;">This font is 100 weight.</p>

css and Input attributes

Recommended

More Related Content

What's hot (20)

Similar to css and Input attributes (20)

Recently uploaded (20)

css and Input attributes

Editor's Notes