What is used in code to specify the width of an image in responsive web design?
Front
Active users
6
All-time users
7
Favorites
1
Last updated
2 years ago
Date created
Dec 9, 2020
Unsectioned
(55 cards)
What is used in code to specify the width of an image in responsive web design?
%
Which type of content should use an <aside>
News feeds
Which form input type supports a required attribute?
file
Given the following CSS code:
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}
Which color does this box turn when a user hovers a mouse pointer over it?
Green with a time duration of two seconds
Which document object model (DOM) method does the Canvas element use?
getContext()
Which JavaScript event handler is associated with the form object?
onreset
Which tag enables developers to include dynamic code in an HTML document?
<script>
Which form input type supports a required attribute?
file
A web designer reviews the following CSS3 code:
#brand {
font-weight: bold;
}
Which paragraph element will it select?
<p id="brand">Web Design</p>
Given the following CSS code:
body {
color : white;
}
Which part of an element is affected by the color property?
Text
A web page has a section that contains an <aside> element. The elementis always 10 pixels from the right
and 50 pixels from the top ofthe browser.
Which type of layout positioning does the <aside> element use?
Fixed
Given the following code:
<form name="Form" action="/action.php" method="post">
Name: <inputtype="text" name="name">
<inputtype="submit" value="Submit">
</form>
What should a developer add or change to ensure thatthe form is validated when submitted?
The event handler and function should be added to the form tag.
Which code segment declares a variable and assigns a Boolean value to it?
var enabled = true;
Which element should a developer use for a bulleted list?
<ul>
Given the following markup:
<inputid="password" name="password" type="password" class="password" pattern=".{8,12}" required>
What does the markup do?
It aIt allows a user to enter a password between 8 and 12 characters long.llows a user to enter a password between 8 and 12 characters long.
Which global attribute should a developer use to bind a label element to an input element?
for
Given the following CSS code:
div
{
transition-property: opacity, left,top, height;
transition-duration: 3s, 5s;
}
Which value will be assigned for the transition related to the height property?
5 seconds
Which style sheet code denes the 18-pixel Arial fontfor all leveltwo headers?
h2
{
font-family: Arial; font-size: 18px; }
Which option declares a variable called name and assigns the literal value Student to it?
var name = "Student";
Given the following CSS code:
body {
color : white;
}
Which part of an elementis affected by the color property?
Background
Which markup positions an image so that the lower part of itis even with the lower part of adjoining text?
<img src="sample.jpg" vertical-align="baseline">
The background-origin property has a value named padding-box.
Which corner of the padding edge does the padding-box value setthe background relative to?
Upper left
Why is JavaScript considered a scripting language?
The code must be interpreted.
Which CSS transition should be used on an image to make it ease in when a user’s mouse hovers over that
image?
transition-timing-function
Which CSS property should a developer use to specify the bottom of a 3D element?
perspective-origin
Given the following HTML:
What color would you like to use?
<select autofocus>
<option value = "red">Red</option>
<option value = "blue">Blue</option>
<option value = "green">Green</option>
<option value = "pink">Pink</option>
</select>
What happens when the page loads?
The select element in the form takes focus.
Which programming language provides dynamic content for a web page across all browsers?
JavaScript
Which background-size property value scales the background image to the greatest height and width that fits within the specified content area?
contain
Which technology is used to access the direct object model (DOM)?
JavaScript
Which element allows a developer to add a caption for a created group of items?
<legend>
Which code segment declares a variable and assigns a Boolean value to it?
var enabled = true;
Which HTML input type allows for mailto: address entry?
url
Which code segment contains a conditional expression?
var discount = (total > 250)?true : false;
Given the following markup:
<script>
function dragOver(event) {
}
function drag(event) {
event.dataTransfer.setData("id", event.target.id);
}
function drop(event) {
var id = event.dataTransfer.getData("id");
event.target.appendChild(document.getElementById(id));
}
</script>
<section id="target" ondragover="dragOver(event)" ondrop="drop(event)"/>
<img id="source" src="image.png" draggable="true" ondragstart="drag(event)"/>
Which statement should a developer add to the dragOver function to allow the image to be dragged and
dropped onto the section element?
event.preventDefault();
Given the following code:
var data = {amount:250; freeShipping:true; message: "Your order has been shipped."};
Which data type does the data variable represent?
Object
Given the following code:
ctx.beginPath();
ctx.lineWidth = 3;
ctx.llStyle = "red";
ctx.arc(75, 75, 50, 0, Math.PI * 2,true);
ctx.ll();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
Which Canvas application programming interface (API) method should a developer use to add the line to
the drawn path on a canvas?
stroke()
Given the following CSS code:
.box {
width: 150px;
height: 150px;
background: red;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: green;
cursor: pointer;
}
Which color does this box turn when a user hovers a mouse pointer over it?
Green with a time duration of two seconds
What should a developer use to test sites for cross-browser compatibility?
Emulator
Which code segment creates inputtextthat has its value checked against a regular expression?
<input type="text" name="name" pattern="[a-zA-Z]">
A web designer creates the following animation by using CSS3:
#texteffect{
position: relative;
animation-name: scroll;
animation-duration: 5s;
animation-timing-function: linear;
animation-play-state: running;
}
@keyframes scroll {
from {left: 0px;}
to {left: 200px;}
}
How does the content of the element move when the page loads?
From left to right one time
What should be added rst when embedding CSS in a single web page as an internal style sheet?
A <style> element to the <head> section
Which background-size property value scales the background image to the greatest height and width that fits within the specified content area?
contain
What does an HTML5 code validator conrm about code?
It complies with a standard.
Which background-size property value scales the background image to the greatest height and width that
ts within the specified content area?
contain
Which method of the Geolocation application programming interface (API) should a developer use to get
periodic updates of a user’s coordinates?
watchPosition()
Given the following HTML code:
<ul>
<li>One</li>
<li>Two</li>
</ul>
Which jQuery code segmentinserts an item atthe beginning ofthe list?
$("ul").prepend("<li>Zero</li>");
Where should a search field be placed on a mobile site?
Across the top
Given the following JavaScript:
var name = "student";
Which code statement sets the name variable to all uppercase characters?
name = name.toUpperCase();
Whatis the rst character a developer should use for an id selector in CSS?
#
What must follow the name of a function in a JavaScriptfunction declaration?
Parenthesis
Which syntax for a CSS class oats images to the right?
.floatright {
float: right;
margin: 7px;
}
A developer needs two pixels of space on the left side of content relative to the border.
Which CSS property should this developer use?
padding-left:2px;
Which CSS selector defines an element with a class attribute equal to subject?
.subject
What is the outermost box of the CSS box model?
Margin
What uses predened code to add functionality to HTML5 pages?
Application programming interface (API)
Html
(72 cards)
Sends the browser forward (positive number) or backward (negative number) the specified number of pages in the
history
history.go(number)
Inserts content at the beginning of the selected elements
prepend()
called when you drag a page element
dragover
Draws a rectangular outline
strokeRect(x,y,width,height)
a standard way to interact with files on the client machine using a Web browser
File API
API that enables rendering of interactive 3D and 2D graphics in an HTML canvas, without the need for plug-ins in HTML5- compatible browsers
WebGL
Returns the number of URLs in the history for this browser window
history.length
Functionality that allows a user to grab an object on a computer screen and move it to a different location on the screen.
drag-and-drop
provides a directory list of file objects. You can list information such as the file name, MIME type and size
. FileList
Cancels an ongoing watchPosition() call
clearWatch()
Selects the first instance of the specified element (<a>) on a page
$("a:first")
. provides read-only access to individual files, such as images
FileReader
Selects all elements with the specified attribute (href)
$("[href]")
Sends the browser back one page in the history
history.back()
An API object used by scripting languages to send HTTP or HTTPS requests to a Web server; the server response is
loaded back into the script.
XMLHttpRequest
. Draws a straight line from the current drawing position to the specified position (x,y)
lineTo(x,y)
Changes the URL in the browser window by adding a URL to the history stack
history.pushState(state object, title, url)
Draws an arcing (curving) line with a center (x,y), a given radius, a starting and ending angle (in radians), and instruction to draw
in a clockwise or counterclockwise direction
arc(x,y,radius,startAngle,endAngle,anticlockwise)
Specifies a key-pair generator field used for forms. When the form is submitted, the private key is stored locally, and the public key is sent to the server.
<keygen>
Sends the browser forward one page in the history
Sends the browser forward one page in the history
returns a context object, which provides properties and methods that can be used to draw and manipulate images on the
canvas.
getContext()
The .class selector Selects elements with the specified class (e.g., demo)
$(".demo")
Ends the current drawing path
closePath()
method to prevent default action where data elements cannot be dropped in other elements
preventDefault()
An area of a Web page that has been defined as a place where dragged items can be placed
drop zone
for (var i = 0, x = files.length; i < x; ++i)
loop that iterates through a set of files
Selects all instances of the specified element (<a>) with the specified attribute (target) and specified value (_blank
$("a[target='_blank']")
Sets or returns the text content of selected elements
text()
Inserts content at the end of the selected elements
append()
used to get and set attribute values
attr()
Moves the drawing pointer to a specified position (x,y)
moveTo(x,y
Selects the current HTML element
$(this)
API used for rendering visual images on the fly by providing scripts with a bitmap canvas.
canvas
An event handler that is called when the history changes for a document in the browser window
window.onpopstate
. Sets or returns the values of form fields
val()
Adds a stroke (line) to the path drawn
stroke()
A standard that specifies how objects in a Web document can be referred to and manipulated through scripting languages.
Document Object Model (DOM)
called when a page element is dropped after being dragge
drop
A technique for transmitting data objects between a server and a Web application without disturbing page display. Uses HTML,
CSS, JavaScript and the DOM
AJAX
Returns the state object at the top of the history stack
history.state
Selects all HTML elements in the document
$("*")
The element selectorSelects instances of the specified element (e.g., <a>) based on the element name
$("a")
A list of the files that are needed for the Web application to work offline
manifest
Selects all instances of the specified element () with the specified class (demo)
$("a.demo")
Inserts content before the selected elements
before()
The ability to determine a user's location
geolocation
Fills the area with the color set by the fillStyle property
fill()
Retrieves the current geographic location of the user
getCurrentPosition()
provides the ability to divide a file into byte ranges
Blob (Binary Large Object)
Sets the thickness of the path drawn, in pixels
lineWidth
A program that permits the user to continue working with Web sites and documents even when a network connection is
unavailable
offline web applications
Inserts content after the selected elements
Inserts content after the selected elements
Draws a filled rectangle
fillRect(x,y,width,height)
The #id selector Selects instances of elements based on the id attribute (e.g., custname) of the element
$("#custname")
A collection of standards and programming instructions that enable access to a software application
application programming interface (API)
Clears the specified area and makes it fully transparent
clearRect(x,y,width,height)
event listener to trigger the drag event.
ondragstart
allows you to add, change and delete URLs and titles in the browser history field
History API
Used with jQuery commands to specify that the code will not run until the document has finished loading
document.ready
loop that iterates through a set of files
for (var i = 0, x = files.length; i < x; ++i)
Retrieves periodic updates about the current geographic location of the user
watchPosition()
determines if the browser supports geolocation
if (navigator.geolocation)
Replaces the current URL in the history with a new one, instead of adding another URL to the history stack
history.replaceState(state object, title, url)
Sets the fill color or style
fillStyle
JavaScript code that selects an HTML element using the ID attribute
document.getElementById("MyLocation")
Sets or returns the content of selected elements (including HTML markup)
. html()
Removes the selected element (and its child elements)
remove()
JavaScript library used to simplify programming.
jQuery
A directory on a computer where applications, such as Internet apps, can be stored and run without access to the original
application.
application cache
Either begins a drawing path or resets the current path
beginPath()
JavaScript
used to access the DOM
. Removes the child elements from the selected element
empty()
JavaScript
(63 cards)
An API object used by scripting languages to send HTTP or HTTPS requests to a Webserver; the server response is loaded back into the script.
. XMLHttpRequest
script added to a single HTML element
inline script
linking web pages to a text file with the .js file name extension
external script
creates a pop-up box with the specified message string, which the user can dismiss by clicking a button in the box
alert()
variable declared outside of any function definition, usually at the start of your script
global variable
a part of a statement that is evaluated as a value
expression
a programming language designed to enable computer users to write useful programs easily
scripting language
Occurs when a page is loaded into the browser (i.e., opened)
load
Occurs when the mouse pointer leaves a link, image or other visible element on a page
mouseOut
creates a pop-up box with the specified message string and requests user confirmation (yes or no) by clicking the OK or Cancel button in the box
confirm()
Operations will evaluate to true or false
Logical
Occurs when the user moves the mouse pointer over a link, image or other visible element on a page
mouseOver
A reference technique used to access a property or method of an object.
dot notation
Occurs when the loading of an image is aborted
abort
creates a pop-up box with the specified message string and requests user input into a text field in the box
prompt()
specific qualities of properties
values
The actual data values you provide in JavaScript
literal
these are typically syntax errors. Load-time errors usually cause error alerts.
Load-time errors
A self-contained programming component that contains properties and methods needed to make a certain type of data useful
object
Occurs when a form's Reset button is clicked
. reset
processes a function's statements
calling statement
used to determine whether an operand is a number
isNaN()
Occurs when the user selects the text in a form field
. select
Assigns a value to a variable using the equal symbol (=)
Assignment
Occurs when a user gives input or focus to a form element
focus
used to assign values
=
A standard that specifies how objects in a Web document can be referred to and manipulated through scripting languages.
Document Object Model (DOM)
. An interpreted programming language designed to simplify application development
scripting language
These are mathematical errors, casting errors, errors in proper command usage or errors in the structure of the script, which result in the script running improperly. Logic errors do not cause error alerts. The script may return unexpected results or may fail to execute at all.
. Logic errors
converts a string to its floating-point decimal equivalent
parseFloat()
variable declared within a function and available only from within that function
local variable
Compares two values and returns a true or false value
Comparison
various attributes of an object, such as height, color, font size, sentence length and so forth.
properties
A special keyword for the null value (e.g., if a user enters nothing in a text box then submits the form, the text box has null value)
null
Mode that describes when values are passed to a function, and the function's parameters receive its argument's actual value
pass by reference
Occurs when a user changes the value of a form field
change
a named space of memory
variable
convert a string value to uppercase letters
toUpperCase()
Occurs when input focus is removed from a form element (e.g., when a user clicks the mouse button outside of a particular field)
blur
writes the specified message string in the page
document.write()
A value or expression containing data or code that is passed on to a function or procedure. Also called a parameter.
argument
combines text strings
concatenation
used to return values from a function
return
True or false values only
. Boolean
Occurs when an error takes place while a page or image is loading
error
Any string of alphanumeric characters used for words or for numbered phrases that are not mathematically manipulated
string
script added to a single web page within either the <head> or <body>
embedded script
converts a string to its integer equivalent
parseInt()
Mode that describes when values are passed to a function, and the function's parameters receive a copy of its argument's value.
pass by value
actions that an object can be made to perform
. methods
Data that is to be operated upon or manipulated in some manner.
operand
Makes decisions in a script; the expression (condition) will return either true or false, then evaluate the corresponding
expression
Conditional
After the script has loaded and is running, an error occurs. These are typically caused by improper use of commands.
Run-time errors usually cause error alerts as well.
Run-time errors
. Evaluates to a number
Arithmetic
a way of changing a variable from one data type to another
casting
a named set of statements that performs a task or calculates a value
. function
. JavaScript library used to simplify JavaScript programming.
jQuery
symbols or characters used in expressions to store or evaluate a value
operator
Occurs when a form's Submit button is clicked
submit
Occurs when a variable has no value assigned yet
. undefined
Occurs when the user clicks on a link or form element
click
Occurs when a page is unloaded from the browser (i.e., closed)
unload
Any numeric value used for mathematical operation
number
CSS3
(94 cards)
for Opera
-o-
. Defines a 3D translation using specified parameters for positions on the X-axis, Y-axis and Z-axis
translate3d(x,y,z)
Defines a 3D rotation by specifying the degree for rotation for all axes
rotate3d(x,y,z,angle)
for Internet Explorer
-ms-
Describes the speed of a transition
transition-timing-function
Specifies the weight or thickness of each character in the font
font-weight
. Moves the element along the Y-axis (vertically)
translateY(n)
Selects every disabled instance of a specified element
element:disabled
Increases or decreases the size of the element, based on specified parameters for width (x) and height (y)
scale(x,y)
Moves the element along the X-axis (horizontally)
translateX(n)
Specifies a justification style for the last line in a text block whose text-align property is set to "justify"
text-align-last
scaleY(y)
Defines a 3D scale transformation by specifying a value for the Y-axis
A W3C technology for applying formatting instructions to other markup language documents.
Cascading Style Sheets (CSS)
Selects every instance of a specified element whose specified attribute begins with the specified value
element[attribute^=value]
technique used to place an HTML element on top of another HTML element
. overlay
Shorthand property for all the animation properties, except animation-play-state
animation
Selects every instance of a specified element that is the last of its parent
element:last-of-type
Turns or skews the element to a specified angle, based on the specified parameters for the horizontal (x) and vertical (y) lines
skew(x-angle,y-angle)
Specifies how an animation progresses over one cycle
animation-timing-function
Specifies whether child elements will retain the parent element's position in 3D space
. transform-style
selects elements with a specific class attribute
class selector
Creates outlined characters for text
text-outline
Changes the element's height
scaleY(n)
Selects every enabled instance of a specified element
element:enabled
Specifies the tabbing order for an element
. nav-index
Allows you to change a transformed element's position
transform-origin
. a specific selection for a property
value
Specifies the identifier for the @keyframes animation that binds it to a selector
animation-name
. Cuts off, or clips, text that extends beyond its container
text-overflow
Defines a 3D scale transformation by specifying a value for the X-axis
. scaleX(x)
Sets the four transition properties into a single property
transition
consists of a property and a value
declaration
Specifies where the cursor will navigate to when the user presses the arrow
nav-right
Specifies that long words in a text area may be broken without a hyphen and wrap to the next line
. word-wrap
Specifies where the cursor will navigate to when the user presses the arrow-left key
nav-left
specifies CSS styles for elements based on a certain state
pseudo selector
Selects every instance of a specified element whose specified attribute contains the specified substring value
element[attribute*=value]
Turns or skews the element to a specified angle along its Y-axis
skewY(angle)
Defines whether an element can be resized by the user and how it can be resized
. resize
Selects every instance of a specified element whose specified attribute ends with the specified value
element[attribute$=value]
. Specifies how the font should be stretched or spaced
font-stretch
Style added directly into the HTML element tag to which you want to apply the style. These styles are applied to elements
individually.
Inline styles
Positions the background-image relative to an element's border, padding or content
background-origin
Specifies whether lines of text in a text area can break, and where a line can be broken. This property is no longer supported.
text-wrap
Specifies whether (and how) punctuation characters can be trimmed or sized when they appear at the beginning or end of a line
punctuation-trim
Defines the amount of time that a transition takes
transition-duration
Defines a 3D translation using only the value for the Z-axis
translateZ(z)
Makes an element look like a standard user interface element, such as a button or window
appearance
Specifies where the cursor will navigate to when the user presses the arrow-down key
nav-down
Defines whether or not an element is visible when it is rotated to face away from the viewer
backface-visibility
Specifies whether (and how) punctuation characters can appear outside the line box at the beginning or end of a full line of text
hanging-punctuation
Creates a border that uses an image instead of a line
border-image
Defines the shape or curve of a border around an element
border-radius
Specifies the number of times that the animation will play
animation-iteration-count
Specifies the range of UNICODE characters that should be downloaded for the font, based on availability
unicode-range
Styles an element with an iconic equivalent
. icon
Changes the element's width
@keyframes
Rotates the element around its Z-axis at the specified degree
rotateZ(angle)
Defines a 3D translation using only the value for the X-axis
translateX(x)
specifies CSS styles for HTML elements based on the element name
tag selector
Specifies how long the animation will take to complete one cycle
animation-duration
Specifies whether the animation is running or paused
animation-play-state
Rotates the element around its Y-axis at the specified degree
rotateY(angle)
Specifies the bottom position of a 3D element
. perspective-origin
a format instruction that consists of a specified selector and the properties and values applied to it
rule
a text file that contains CSS formatting instructions
External style sheet
styles added to the <head> of individual an HTML document
Embedded or Internal style sheet
Specifies when the animation will begin
animation-delay
Specifies the perspective from which a 3D child element is viewed by defining how far it is placed from view (in pixels)
perspective
Specifies how the font should be styled vertical or slanted
font-style
Specifies a justification style for text whose text-align property is set to "justify"
text-justify
Rotates the element around its X-axis at the specified degree
rotateX(angle)
Specifies whether lines of text in a text area can break, and where a line can be broken
word-break
Defines the size of background images
background-size
Draws an outline beyond the border edge as specified
outline-offset
Defines a 3D transformation using a 4x4 matrix of 16 values
matrix3d(n,n,n,n,n,n,n,n,n,n,n, n,n,n,n,n)
Selects every instance of a specified element that is the first of its parent
element:first-of-type
allows developers to specify custom fonts for their Web page elements
2. @font-face
Specifies the CSS property that the transition will affect
translateX(x)
Selects every instance of element2 that is preceded by an instance of element1
element1~element2
Moves the element from its current position, based on the specified parameters for the left (x) and top (y) position
translate(x,y)
. transform
Applies a 2D or 3D transformation to an element, including rotating, moving, skewing, scaling and so forth
Defines a 3D scale transformation by specifying a value for the Z-axis
scaleZ(z)
Selects every disabled instance of a specified element
value
Specifies the CSS property that the transition will affect
transition-property
specifies the stack order of an element
z-index
Combines all of the 2D transform methods into one
. matrix(n,n,n,n,n,n)
Specifies the painting area of the background. Determines whether the background extends into the border or not
. background-clip
Defines when the transition will begin
transition-delay
for Chrome, Safari and iOS
-webkit-
Turns or skews the element to a specified angle along its X-axis
skewX(angle)
Applies shadows to edges of text characters to create visual depth
text-shadow
Defines a 3D translation using only the value for the Y-axis
translateY(y)
. Defines a perspective view for a 3D transformed element
perspective(n)
Web Forms
(62 cards)
Specifies how form input should be encoded when submitted to the server
formenctype
Specifies the maximum number of characters that can be entered in the field by the user
maxlength
pattern for latitude/longitude
<input type="text" pattern="-?\d{1,3}\.\d+">
Provides a hint to the user of the input value expected in the field
placeholder
stored locally on the user's computer
private key
pogo-sticking
Occurs when users must submit and resubmit a form until it validates
Allows the user to choose a date and time with a local time zone
<input type="datetime-local">
Specifies the HTTP method for sending form input to the formaction attribute's URL value
formmethod
Allows the user to enter numbers using a slider control
<input type="range">
rectangular field that can expand upon user interaction and allow users to select one or more pre-determined choices
Drop-down select list
pattern for a URL
<input type="url" pattern="https?://.+">
Allows the user to enter one or more e-mail addresses
<input type="email">
recognizes text input and completes the text entry automatically
autocomplete
Requires the user to select or enter a value before the form can be submitted
required
round buttons in a group of mutually exclusive pre-determined choices
Radio buttons
Allows the user to enter a URL, such as an http://, ftp:// or mailto: address
<input type="url">
Allows the user to choose a date using the month and year (without time zone)
<input type="month">
Adds security to a form through asymmetric encryption by creating a key-pair generator field in the form
<keygen>
rectangle field into which users can type alphanumeric characters of their choice
Text box
Allows the user to enter a date (without time zone) using a drop-down date-picker calendar
<input type="date">
Applies focus on the element when the page loads
autofocus
used to group elements so that related fields are placed together in a form
<fieldset>
a process that tests data input by users in a Web form to verify whether the input follows a specified format or meets minimum requirements for character number or type.
User input validation
<input type="tel">
Allows the user to enter a phone number
Specifies a name or keyword that indicates where to display the response to the user after s/he has submitted the form
formtarget
Checks input into the field against a regular expression, which is a pattern of characters for use in pattern-matching and search-and-replace functions
pattern
Specifies where to send user input when the form is submitted
formaction
Allows the user to choose a date and time with a GMT time zone
<input type="datetime">
An attribute used by many different elements.
global attribute
Requires input in the field before the form can be submitted
required
Allows the user to enter more than one value in the element
multiple
Specifies a name for the element that can be used to reference it
name
square buttons in a group of pre-determined choices from which the user can select more than one choice
Check boxes
Specifies the IDs of elements whose values were used
for
enables you to add a label to an input element in a form
<label>
A type of user input validation in which the user input in each field of a form is validated as the user completes it, before the form is submitted.
inline validation
Specifies whether text submitted in a form field is to be wrapped
wrap
Specifies a list of pre-defined choices for an element
. . <datalist>
Specifies the form(s) on the page in which the element appears
form
Disables the element
disabled
allows you to add a caption for a group of items created by the element
<legend>
Refers to pre-defined options contained in a datalist
. list
Specifies a short description to provide the user with a hint about the expected input in the field
placeholder
The backward-compatibility of code; its ability to render an acceptable substitute on the page when older or noncompatible browsers cannot support newer HTML features
graceful degradation
Directs the browser not to validate form data upon submission
novalidate
buttons typically found at the bottom of forms used for either submitting the form or clearing all user input from the form
Submit and Reset buttons
used to designate the beginning of a form on a page
<form>
Allows the user to enter rational integers or float values
<input type="number">
Defines the minimum or maximum value for an element
min max
Allows the user to choose colors
<input type="color">
submits a user's completed form data to the server for processing
<button type="submit">
Allows the user to enter text for a search query
<input type="search">
pattern for an email address
<input type="email" pattern="^.+@.+$">
pattern for a date
<input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}">
. Semantic input types
input fields that describe their content to developers as well as browsers
Allows the user to choose a date using the week and year (without time zone)
. <input type="week">
specifies that a field must be completed before form submission
required
Defines the maximum length of input allowed in an field
maxlength
ensure that certain types of form data are entered correctly, such as dates, e-mail addresses, prices and URLs
pattern
Directs the form not to validate upon submission
formnovalidate
Displays the result when a calculation is performed
<output>
sent to the Web site's server to match the user's key
public key