Robot/html-tips-tricks
1
0
Fork 0
mirror of https://github.com/atapas/html-tips-tricks.git synced 2024-11-16 08:48:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

added new features in input

Browse source
This commit is contained in:
Utsav bhattarai 2022-10-09 10:47:11 +05:45
parent 9988da9174
commit f46a762387
1 changed files with 108 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
inputs/index.html
View file

@ -1,18 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset="utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>HTML Tips and Tricks - Inputs</title> <title>HTML Tips and Tricks - Inputs</title>
<meta name='viewport' content='width=device-width, initial-scale=1'> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet"> <link
<link rel='stylesheet' type='text/css' media='screen' href='../main.css'> href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" media="screen" href="../main.css" />
<script> <script>
function showColor(event) { function showColor(event) {
let colorHex = event.target.value; let colorHex = event.target.value;
document.getElementById('colorMe').style.color = colorHex; document.getElementById("colorMe").style.color = colorHex;
} }
</script> </script>
</head> </head>
@ -25,15 +27,15 @@
<h1>All about Inputs</h1> <h1>All about Inputs</h1>
<h2>Color picker</h2> <h2>Color picker</h2>
<input type="color" onchange="showColor(event)"> <input type="color" onchange="showColor(event)" />
<p id="colorMe">Color Me!</p> <p id="colorMe">Color Me!</p>
<div class="box"> <div class="box">
<h2>Required</h2> <h2>Required</h2>
<form> <form>
<label for="username1">Username:</label> <label for="username1">Username:</label>
<input type="text" id="username1" name="username" required> <input type="text" id="username1" name="username" required />
<input type="submit"> <input type="submit" />
</form> </form>
</div> </div>
@ -41,8 +43,14 @@
<h2>Autofocus</h2> <h2>Autofocus</h2>
<form> <form>
<label for="username2">Username:</label> <label for="username2">Username:</label>
<input type="text" id="username2" name="username" required autofocus> <input
<input type="submit"> type="text"
id="username2"
name="username"
required
autofocus
/>
<input type="submit" />
</form> </form>
</div> </div>
@ -50,8 +58,13 @@
<h2>Placeholder</h2> <h2>Placeholder</h2>
<form> <form>
<label for="username3">Username:</label> <label for="username3">Username:</label>
<input type="text" id="username3" name="username" placeholder="Enter your username"> <input
<input type="submit"> type="text"
id="username3"
name="username"
placeholder="Enter your username"
/>
<input type="submit" />
</form> </form>
</div> </div>
@ -60,7 +73,7 @@
<form> <form>
<label for="email">Username:</label> <label for="email">Username:</label>
<input id="email" name="email" type="email" /> <input id="email" name="email" type="email" />
<input type="submit"> <input type="submit" />
</form> </form>
</div> </div>
@ -68,15 +81,43 @@
<h2>Regex validations</h2> <h2>Regex validations</h2>
<form> <form>
<label for="password">Strong password($Password1234):</label> <label for="password">Strong password($Password1234):</label>
<input type="password" <input
type="password"
name="password" name="password"
id="password" id="password"
placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required> pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"
autofocus
required
/>
<button type="submit">Test</button> <button type="submit">Test</button>
</form> </form>
</div> </div>
<div class="box">
<h2>Auto Complete</h2>
<form autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" /><br /><br />
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" /><br /><br />
<label for="email">Email Address:</label>
<input
type="email"
id="email"
name="email"
autocomplete="off"
/><br /><br />
<input type="submit" value="Submit" />
</form>
</div>
<div class="box">
<h2>Fixed input value</h2>
<form autocomplete="on">
<label for="fname">User name(4 to 12 character):</label>
<input type="text" id="username" name="username" minlength="4" maxlength="12" />
<input type="submit" value="Submit" />
</form>
</div>
</div> </div>
</body> </body>
</html> </html>