Example code:
<html>
<head>
<meta charset="UTF-8">
<style>
.blinking{
animation:blinkingText 1.4s infinite;
color:red;
}
@keyframes blinkingText{
0%{ color: #000; }
49%{ color: red; }
50%{ color: red; }
99%{ color: red; }
100%{ color: #000; }
}
</style>
</head>
<body bgcolor="dodgerblue">
<h2>The placeholder Attribute</h2>
<p>The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).</p>
<form action="/action_page.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
<marquee behavior="scroll" direction="right" scrollamount="1"><font color="green" size="20"><span class="blinking" >HTML</span></font></marquee>
<marquee behavior="scroll" direction="up"><font color="green" size="20" scrollamount="10"><span class="blinking" >Java</span></font></marquee>
<marquee behavior="scroll" direction="down"><font color="green" size="20"><span class="blinking" scrollamount="30">Python</span></font></marquee>
<p>
<center> <select name="cars" size="3" multiple id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<option value="maruti">Maruti</option>
<option value="nano">Nano</option>
</select>
<input type="button" onclick="f1()" value="Values">
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form name="f1" action="/">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<form name="f2" action="/action_page.php">
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>
The pattern Attribute
The pattern attribute specifies a regular expression that the <input> <br>element's value is checked against.
The pattern attribute works with the following input types: text, search, <br>url, tel, email, and password.
<form action="/action_page.php">
Country code: <input type="text" name="country_code" pattern="[A-Z]{3}" title="Three letter country code">
<input type="submit">
</form>
<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 name="f3" action="/action_page.php">
E-mail:
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
<h2>Date Field Restrictions</h2>
<p>Use the min and max attributes to add restrictions to dates:</p>
<form name="f4" action="/action_page.php">
Enter a date before 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit">
</form>
<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.<p>
<form name="f5" action="/action_page.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
<p>Show a file-select field which allows a file to be chosen for upload:</p>
<h1>File upload</h1>
<form action="/action_page.php">
Select a file: <input type="file" name="myFile"><br><br>
<input type="submit">
</form>
<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">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
Text:
<input type="text" value="Name" maxlength="8" size="10">
Textarea:
<input type="textarea" cols="20" rows="8" maxlength ="10">
</form>
<form>
<input type="range" name="points" min="0" max="10">
</form>
<form>
Search Google:
<input type="search" name="googlesearch">
<input type="submit">
</form>
<form action="/action_page.php">
Telephone:
<input type="tel" name="usrtel"> supported only by safari
<input type="submit">
</form>
<h2>Time Field</h2>
<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>
<p>Depending on browser support:<br>A time picker might pop-up when you enter the input field.</p>
<h2>Time:</h2>
<form action="/action_page.php">
Select a time:
<input type="time" name="usr_time">
<input type="submit">
</form>
<h2>Week Field</h2>
<p>The <strong>input type="week"</strong> allows the user to select a week and year:</p>
<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>
<form action="/action_page.php">
Select a week:
<input type="week" name="year_week">
<input type="submit">
</form>
<h1>Input Attributes</h1>
<h2>The readonly Attribute</h2>
<p>The readonly attribute specifies that the input field is read only (cannot be changed):</p>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname" autofocus>
Disabled atrr
First name:<br>
<input type="text" name="firstname" value="John" disabled>
When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.
E-mail: <input type="email" name="email" autocomplete="off"><br>
</form>
The form Attribute
The form attribute specifies one or more forms an <input> element belongs to.
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname" required><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
</center>
<marquee behavior="alternate" scrollamount="40">Bouncing text...</marquee>
<marquee behavior="slide" direction="left">HTML slide-in text...</marquee>
<marquee behavior="scroll" direction="left" scrollamount="40"><font color="green" size="20"><span class="blinking" >C/C++</span></font></marquee>
</p>
<!-- <script src="myscripts.js"></script> External js file -->
<script>
function f1(){
var v = document.getElementById("cars").value;
alert(v);
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<style>
.blinking{
animation:blinkingText 1.4s infinite;
color:red;
}
@keyframes blinkingText{
0%{ color: #000; }
49%{ color: red; }
50%{ color: red; }
99%{ color: red; }
100%{ color: #000; }
}
</style>
</head>
<body bgcolor="dodgerblue">
<h2>The placeholder Attribute</h2>
<p>The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).</p>
<form action="/action_page.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
<marquee behavior="scroll" direction="right" scrollamount="1"><font color="green" size="20"><span class="blinking" >HTML</span></font></marquee>
<marquee behavior="scroll" direction="up"><font color="green" size="20" scrollamount="10"><span class="blinking" >Java</span></font></marquee>
<marquee behavior="scroll" direction="down"><font color="green" size="20"><span class="blinking" scrollamount="30">Python</span></font></marquee>
<p>
<center> <select name="cars" size="3" multiple id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<option value="maruti">Maruti</option>
<option value="nano">Nano</option>
</select>
<input type="button" onclick="f1()" value="Values">
<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form name="f1" action="/">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<form name="f2" action="/action_page.php">
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
<input type="submit">
</form>
The pattern Attribute
The pattern attribute specifies a regular expression that the <input> <br>element's value is checked against.
The pattern attribute works with the following input types: text, search, <br>url, tel, email, and password.
<form action="/action_page.php">
Country code: <input type="text" name="country_code" pattern="[A-Z]{3}" title="Three letter country code">
<input type="submit">
</form>
<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 name="f3" action="/action_page.php">
E-mail:
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
<h2>Date Field Restrictions</h2>
<p>Use the min and max attributes to add restrictions to dates:</p>
<form name="f4" action="/action_page.php">
Enter a date before 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit">
</form>
<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.<p>
<form name="f5" action="/action_page.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
<p>Show a file-select field which allows a file to be chosen for upload:</p>
<h1>File upload</h1>
<form action="/action_page.php">
Select a file: <input type="file" name="myFile"><br><br>
<input type="submit">
</form>
<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">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
Text:
<input type="text" value="Name" maxlength="8" size="10">
Textarea:
<input type="textarea" cols="20" rows="8" maxlength ="10">
</form>
<form>
<input type="range" name="points" min="0" max="10">
</form>
<form>
Search Google:
<input type="search" name="googlesearch">
<input type="submit">
</form>
<form action="/action_page.php">
Telephone:
<input type="tel" name="usrtel"> supported only by safari
<input type="submit">
</form>
<h2>Time Field</h2>
<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>
<p>Depending on browser support:<br>A time picker might pop-up when you enter the input field.</p>
<h2>Time:</h2>
<form action="/action_page.php">
Select a time:
<input type="time" name="usr_time">
<input type="submit">
</form>
<h2>Week Field</h2>
<p>The <strong>input type="week"</strong> allows the user to select a week and year:</p>
<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>
<form action="/action_page.php">
Select a week:
<input type="week" name="year_week">
<input type="submit">
</form>
<h1>Input Attributes</h1>
<h2>The readonly Attribute</h2>
<p>The readonly attribute specifies that the input field is read only (cannot be changed):</p>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname" autofocus>
Disabled atrr
First name:<br>
<input type="text" name="firstname" value="John" disabled>
When autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.
E-mail: <input type="email" name="email" autocomplete="off"><br>
</form>
The form Attribute
The form attribute specifies one or more forms an <input> element belongs to.
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname" required><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
</center>
<marquee behavior="alternate" scrollamount="40">Bouncing text...</marquee>
<marquee behavior="slide" direction="left">HTML slide-in text...</marquee>
<marquee behavior="scroll" direction="left" scrollamount="40"><font color="green" size="20"><span class="blinking" >C/C++</span></font></marquee>
</p>
<!-- <script src="myscripts.js"></script> External js file -->
<script>
function f1(){
var v = document.getElementById("cars").value;
alert(v);
}
</script>
</body>
</html>
No comments:
Post a Comment