In
HTML5 input contains the following list of new attributes –
·
Placeholder
(text fields with temporary entry) – It specifies a short hint that
describes the expected value of an input field. The hint is displayed in the
input field when it is empty and disappears when the field gets focus.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html">
First Name <input type="text" placeholder="Enter
fname"/><br/>
Email <input type="email" placeholder="enter
email"><br/>
<input type="submit" value="Login"
name="sub">
</form>
</body>
</html>
·
Autofocus
– It
is a boolean attribute, when present it specifies that an <input> element
should automatically get focus when the page loads. It works on any input
level.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html">
First Name <input type="text" /><br/>
Email <input type="email"autofocus="autofocus"><br/>
<input type="submit" value="Login"
name="sub">
</form>
</body>
</html>
·
Required – It is a boolean
attribute, when present it specifies that an input field must be filled out
before submitting the form.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html">
<label>What is your favorite movie</label>
<input type="text" name="movie"
required/>
<input type="submit" value="Submit">
</form>
</body>
</html>
·
Autocomplete – This attribute specifies
whether or not an input field should have autocomplete enabled. Autocomplete
allows the browser to predict the value. It can be either on / off.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" autocomplete="on">
Name <input type="text" name="name"><br/>
Email<input type="email" name="email"
autocomplete="off"/>
<input type="submit" value="Submit">
</form>
</body>
</html>
·
Form – It specifies one or more
forms an <input> elements belongs to. In the below example Last Name is
outside the form but still it’s a part of a form.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="home.html" id="form1">
Name <input type="text" name="name"><br/>
Email<input type="email" name="email">
<input type="submit" value="Submit">
</form>
Last<input type="text" name="lname"
form="form1"><br/>
</body>
</html>
·
Formaction – It specifies the url of
a file that will process the input control when the form is submitted. The
Formaction attribute overrides the action attribute of the <form>
element.This attribute is used with input type submit and image.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="http://google.com">
Name <input type="text" name="name"><br/>
Email<input type="email" name="email">
<input type="submit" value="Submit"
formaction="html5.png">
</form>
</body>
</html>
·
Formenctype - It specifies how the form data should be
encoded when submitting it to the server. The formenctype attribute overrides
the enctype attribute of the <form> element. It is used with type=”submit”
and type=”image”
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="abc.html" method="post">
Name <input type="text" name="name"><br/>
Password<input type="password" name="pwd">
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Poinput">
</form>
</body>
</html>
·
Formmethod – It defines the HTTP
method for sending form data to the action url. This attribute overrides the
method attribute of the <form> element. It can be used with the
type=”submit” and type=”image”.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="abc.html" method="get">
Name <input type="text" name="name"><br/>
Password<input type="password" name="pwd">
<input type="submit" value="Submit">
<input type="submit" formmethod="post" value="Input">
</form>
</body>
</html>
·
Formnovalidate – It is a boolean
attribute. When present it specifies that the <input> element should not
be validated when submitted. It can be used with type=”submit”.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="abc.html" method="get">
Name <input type="text" name="name"><br/>
Email<input type="email" name="email"
required/><br/>
<input type="submit" value="Submit">
<input type="submit" value="Novalidate"
formnovalidate="formnovalidate">
</form>
</body>
</html>
·
Formtarget – It specifies a name or
keyword that indicates where to display the response that is received after
submitting the form. It can be used with type=”submit” and type=”image”.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="abc.html" method="get">
Name <input type="text" name="name"><br/>
Email<input type="email" name="email"
required/><br/>
<input type="submit" value="Sametab">
<input type="submit" value="Newtab"
formtarget="_blank">
</form>
</body>
</html>
·
Height and Width – It specifies the height
and width of the <input> element. It is used only with <input type=”image”>
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="abc.html">
Name <input type="text" name="name"><br/>
Email<input type="email" name="email"
required/><br/>
Image<input type="image" src="tr.jpg"
width="25px" height="15px">
</form>
</body>
</html>
·
List – It refers to a
<datalist> element that contains predefined options for an <input>
element.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="abc.html" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="IE">
<option value="Firefox">
<option value="Chrome">
</datalist>
<input type="submit" value="Submit">
</form>
</body>
</html>
·
Multiple – It is a boolean
attribute. When present it specifies that the user is allowed to enter more
than one value in the <input> element. It supports email and file input
types.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="abc.html">
Select files<input type="file" name="img"
multiple="multiple"><br/>
<input type="submit" value="Login">
</form>
</body>
</html>
·
Pattern – It specifies a regular
expression that the <input> value is checked against.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<form action="abc.html">
<input type="text" name="code"
pattern="[A-Za-z]{2}" title="two letter country code" placeholder="IN" required/>
<input type="submit" value="Login">
</form>
</body>
</html>
·
Spell check – It specifies whether the
element is to have its spelling and grammar checked or not. The values are
either true or false.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<input type="text" spellcheck="true"><br/>
<textarea spellcheck="true"></textarea>
</body>
</html>
·
Contenteditable – Using this attribute we
can modify the content directly on the webpage.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<p contenteditable="true"
spellcheck="true">You can edit me</p>
<p contenteditable="false"
spellcheck="false">You cannot edit</p>
</body>
</html>
·
Accesskey – It allows easier
navigation by assigning a keyboard shortcut to a link (which will usually gain
focus when user presses Alt or Ctrl + the access key. Chrome supports
Alt+accesskey.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<a href="http://www.google.com"
accesskey="g">Google</a>
<a href="http://www.amazon.in"
accesskey="a">Amazon</a>
</body>
</html>
No comments:
Post a Comment