Scribd
Upload
13 views5 pages

HTML 4

Uploaded by

M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views5 pages

HTML 4

Uploaded by

M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

Client Side validation using HTML & HTML5:

===========================
Username:Rahul_12345 ---->Regex object--->[A-Z]{1}[a-z]*[_]{1}[0-9]{5}
Password:RA_12345 ------>Regex object --->[A-Z]{2}[_]{1}[0-9]{5}

Ex1:
==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & HTML5</title>
</head>
<body>
<hr>
<center>
<h1><tt>Welcome to IHUB_IT_SERVICES </tt></h1>
</center>
<hr>
<br>
<hr>
<center>
<form action="" method="get">
<label for="">Username</label>
<input type="text" placeholder="username" required title="Ex:Username
must be ---Rahul_12345" pattern="[A-Z]{1}[a-z]*[_]{1}[0-9]{5}">
<label for="">Password</label>
<input type="password" placeholder="password" required title="Password
must be ---Ex:RA_12345" pattern="[A-Z]{2}[_]{1}[0-9]{5}">
<input type="submit" value="LOGIN">
<input type="reset" value="RESET">
</form>
</center>
<hr>

</body>
</html>

Ex2:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & HTML5</title>
</head>
<body>
<hr>
<center>
<h1><tt>Welcome to IHUB_IT_SERVICES</tt></h1>
</center>
<hr>
<br>
<fieldset>
<legend>LOGIN_HERE</legend>
<center>
<form action="" method="get">
<label for="">Username</label>
<input type="text" placeholder="username" required title="Ex:Username must
be ---Rahul_12345" pattern="[A-Z]{1}[a-z]*[_]{1}[0-9]{5}">
<br>
<br>
<label for="">Password</label>
<input type="password" placeholder="password" required title="Password must
be ---Ex:RA_12345" pattern="[A-Z]{2}[_]{1}[0-9]{5}">
<br>
<br>
<input type="submit" value="LOGIN">
<input type="reset" value="RESET">
</form>
</center>
</fieldset>

</body>
</html>

Ex3:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & HTML5</title>
</head>
<body>
<hr>
<center>
<h1><tt>Welcome to IHUB_IT_SERVICES</tt></h1>
</center>
<hr>
<br>
<fieldset>
<legend>LOGIN_HERE</legend>
<center>
<form action="" method="get">
<label for="">Username</label>
<br>
<input type="text" placeholder="username" required title="Ex:Username must
be ---Rahul_12345" pattern="[A-Z]{1}[a-z]*[_]{1}[0-9]{5}">
<br>
<br>
<label for="">Password</label>
<br>
<input type="password" placeholder="password" required title="Password must
be ---Ex:RA_12345" pattern="[A-Z]{2}[_]{1}[0-9]{5}">
<br>
<br>
<input type="submit" value="LOGIN">
<input type="reset" value="RESET">
</form>
</center>
</fieldset>
</body>
</html>

Working on radio button in HTML & HTML5:


===========================
HTML & HTML 5 supports radio button.The main objective of radio button
is to select one option at time.

<input type="radio" name="" value="" />

Ex1:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & HTML5</title>
</head>
<body>
<hr>
<center>
<h1><tt>Welcome to IHUB_IT_SERVICES</tt></h1>
</center>
<hr>
<br>
<fieldset>
<legend>Radio_Button</legend>
<center>
<form action="" method="get">
<table border="3">
<tr>
<td><label for="">GENDER</label></td>
<td><input type="radio" name="gender" value="male"><label
for="">MALE</label>
<input type="radio" name="gender" value="female"><label
for="">FEMALE</label>

</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="VALIDATE"></td>
</tr>

</table>

</form>
</center>
</fieldset>

</body>
</html>
Ex2:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & HTML5</title>
</head>
<body>
<hr>
<center>
<h1><tt>Welcome to IHUB_IT_SERVICES</tt></h1>
</center>
<hr>
<br>
<fieldset>
<legend>Radio_Button</legend>
<center>
<form action="" method="post">
<table border="3">
<tr>
<td><label for="">GENDER</label></td>
<td><input type="radio" name="gender" value="male"><label
for="">MALE</label>
<input type="radio" name="gender" value="female"><label
for="">FEMALE</label>

</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="VALIDATE"></td>
</tr>

</table>

</form>
</center>
</fieldset>

</body>
</html>

Working with checkbox:


==============
HTML & HTML supports Checkbox.The main objective of checkbox is to select at least
one or
more than one option.

Ex1:
===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & HTML5</title>
</head>
<body>
<hr>
<center>
<h1><tt>Welcome to TCS for FrontEnd Developer</tt></h1>
</center>
<hr>
<br>
<fieldset>
<legend>Checkbox</legend>
<center>
<form action="" method="post">
<table border="3">
<tr>
<td><label for="">Technologies</label></td>
<td><input type="checkbox" name="tech"
value="javascript"><label for="">JavaScript</label>
<input type="checkbox" name="tech"
value="angular"><label for="">Angular</label>
<input type="checkbox" name="tech" value="react"><label
for="">React</label>

</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="VALIDATE"></td>
</tr>

</table>

</form>
</center>
</fieldset>

</body>
</html>

You might also like