Scribd
Upload
3 views3 pages

HTML User Validation and DHTML Color Change

The document contains two HTML examples: the first is a user validation form with fields for username and password, utilizing regular expressions for validation and providing feedback on authorization status. The second example demonstrates DHTML functionalities, allowing users to change the color of text and hide or show it using buttons. Both examples include relevant JavaScript for interactivity and styling for presentation.

Uploaded by

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

HTML User Validation and DHTML Color Change

The document contains two HTML examples: the first is a user validation form with fields for username and password, utilizing regular expressions for validation and providing feedback on authorization status. The second example demonstrates DHTML functionalities, allowing users to change the color of text and hide or show it using buttons. Both examples include relevant JavaScript for interactivity and styling for presentation.

Uploaded by

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

1) Design a HTML form for Validation of users with fields username,

password, ok button which should receive the input from the user
and responses as authorized or invalid username or invalid
password using regular expression.
Code:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>User Validation</title>

<style>

body { font-family: Arial, sans-serif; margin: 24px; }

form { max-width: 360px; padding: 16px; border: 1px solid #ddd; border-radius: 8px; }

.row { margin-bottom: 12px; }

label { display: block; margin-bottom: 6px; font-weight: 600; }

input { width: 100%; padding: 8px; box-sizing: border-box; }

#msg { margin-top: 12px; font-weight: 600; }

.ok { color: #0a7b2c; }

.err { color: #b00020; }

</style>

</head>

<body>

<form id="loginForm" novalidate>

<div class="row">

<label for="username">Username</label>

<input id="username" name="username" type="text" required />

</div>

<div class="row">

<label for="password">Password</label>

<input id="password" name="password" type="password" required />

</div>

<button type="submit">OK</button>

<div id="msg" aria-live="polite"></div>

</form>

<script>

const usernameRegex = /^[A-Za-z][A-Za-z0-9_]{4,14}$/;

const passwordRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[@#$%^&+=!])[A-Za-z\d@#$%^&+=!]{8,}$/;

const form = [Link]('loginForm');

const msg = [Link]('msg');

[Link]('submit', function (e) {

[Link]();

const username = [Link]('username').[Link]();


const password = [Link]('password').value;

const validUser = [Link](username);

const validPass = [Link](password);

if (!validUser) {

[Link] = 'Invalid username';

[Link] = 'err';

return;

if (!validPass) {

[Link] = 'Invalid password';

[Link] = 'err';

return;

[Link] = 'Authorized';

[Link] = 'ok';

});

</script>

</body>

</html>

Output:

2)Using DHTML program to Changing color, hidden and viewable.


Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>DHTML Example</title>

<style>

#myText {

font-size: 22px;

font-weight: bold;

color: blue;

}
button {

margin: 6px;

padding: 6px 12px;

</style>

</head>

<body>

<p id="myText">ASSIGNMENT 3</p>

<button onclick="changeColor()">Change Color</button>

<button onclick="hideText()">Hide</button>

<button onclick="showText()">Show</button>

<script>

function changeColor() {

const colors = ["red", "green", "blue", "purple", "orange"];

const random = colors[[Link]([Link]() * [Link])];

[Link]("myText").[Link] = random;

function hideText() {

[Link]("myText").[Link] = "none";

function showText() {

[Link]("myText").[Link] = "block";

</script>

</body>

</html>

Output:

Changing color

Hiding

You might also like