Scribd
Upload
24 views13 pages

Day 3 Assignment PDF

Yaskin

Uploaded by

Neeraj Katam
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
24 views13 pages

Day 3 Assignment PDF

Yaskin

Uploaded by

Neeraj Katam
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
You are on page 1/ 13

1Q)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with All Input Control Elements</title>
</head>
<body>

<form>
<!-- Text Input -->
<label for="text_input">Text Input:</label>
<input type="text" id="text_input" class="input_class" name="text_input" placeholder="Enter
text..." autocomplete="on" readonly="false" required autofocus>

<!-- Password Input -->


<label for="password_input">Password Input:</label>
<input type="password" id="password_input" class="input_class" name="password_input"
placeholder="Enter password..." autocomplete="off" readonly="false" required>

<!-- Radio Button -->


<label for="radio_option1">Radio Button:</label>
<input type="radio" id="radio_option1" class="input_class" name="radio_group" value="option1"
checked>
<label for="radio_option1">Option 1</label>
<input type="radio" id="radio_option2" class="input_class" name="radio_group" value="option2">
<label for="radio_option2">Option 2</label>

<!-- Checkbox -->


<label for="checkbox_input">Checkbox:</label>
<input type="checkbox" id="checkbox_input" class="input_class" name="checkbox_input"
checked>

<!-- Select -->


<label for="select_input">Select:</label>
<select id="select_input" class="input_class" name="select_input" multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

<!-- File Input -->


<label for="file_input">File Input:</label>
<input type="file" id="file_input" class="input_class" name="file_input" accept=".jpg, .jpeg, .png"
disabled>

<!-- Number Input -->


<label for="number_input">Number Input:</label>
<input type="number" id="number_input" class="input_class" name="number_input" min="1"
max="10" step="1" value="5">

<!-- Range Input -->


<label for="range_input">Range Input:</label>
<input type="range" id="range_input" class="input_class" name="range_input" min="0" max="100"
step="5" value="50">

<!-- Email Input -->


<label for="email_input">Email Input:</label>
<input type="email" id="email_input" class="input_class" name="email_input" placeholder="Enter
email..." autocomplete="email" readonly="false" required>

<!-- URL Input -->


<label for="url_input">URL Input:</label>
<input type="url" id="url_input" class="input_class" name="url_input" placeholder="Enter URL..."
autocomplete="url" readonly="false" required>

<!-- Textarea -->


<label for="textarea_input">Textarea:</label>
<textarea id="textarea_input" class="input_class" name="textarea_input" placeholder="Enter
text..." rows="4" cols="50" readonly="false" required></textarea>

<!-- Submit Button -->


<input type="submit" value="Submit">
</form>

</body>
</html>
2Q)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset and Legend Example</title>
</head>
<body>

<form>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
</fieldset>
<br>
<input type="submit" value="Submit">
</form>

</body>
</html>
3Q)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Field Validation</title>
<script>
function validateInput() {
var inputField = document.getElementById("inputField");
var minLength = inputField.getAttribute("minlength");
var maxLength = inputField.getAttribute("maxlength");
var inputValue = inputField.value.trim();

if (inputValue.length < minLength) {


alert("Input must be at least " + minLength + " characters long.");
return false;
}

if (inputValue.length > maxLength) {


alert("Input must not exceed " + maxLength + " characters.");
return false;
}

return true;
}
</script>
</head>
<body>
<form onsubmit="return validateInput()">
<label for="inputField">Input:</label>
<input type="text" id="inputField" name="inputField" minlength="3" maxlength="10" required>
<button type="submit">Submit</button>
</form>
</body>
</html>
4Q)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
</head>
<body>
<h2>Upload a File</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload File" name="submit">
</form>
</body>
</html>
5Q)

<!DOCTYPE html>
<html>
<head>
<title>Submit vs Button</title>
</head>
<body>
<form action="/submit_form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<!-- Submit button -->
<input type="submit" value="Submit">
<!-- Regular button -->
<button type="button" onclick="alert('Button clicked!')">Click
Me</button>
</form>
</body>
</html>
6Q)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Input Elements</title>
</head>
<body>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>

<label for="number">Number:</label>
<input type="number" id="number" name="number"><br>

<label for="range">Range:</label>
<input type="range" id="range" name="range"><br>

<label for="search">Search:</label>
<input type="search" id="search" name="search"><br>

<label for="image">Image:</label>
<input type="image" id="image" src="example.jpg" alt="Submit"><br>

<label for="week">Week:</label>
<input type="week" id="week" name="week"><br>

<label for="url">URL:</label>
<input type="url" id="url" name="url"><br>

<label for="month">Month:</label>
<input type="month" id="month" name="month"><br>

<label for="datetime">Datetime-local:</label>
<input type="datetime-local" id="datetime" name="datetime"><br>

<label for="time">Time:</label>
<input type="time" id="time" name="time"><br>

<label for="date">Date:</label>
<input type="date" id="date" name="date"><br>

</body>
</html>
7Q)
8Q)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Form</title>
</head>
<body>
<h2>Student Information Form</h2>
<form action="/submit" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>

<label for="age">Age:</label><br>
<input type="number" id="age" name="age"><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>

<label for="gender">Gender:</label><br>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br>

<label for="major">Major:</label><br>
<input type="text" id="major" name="major"><br>

<label for="year">Year:</label><br>
<input type="number" id="year" name="year"><br>

<input type="submit" value="Submit">


</form>
</body>
</html>
9Q)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar</title>
<style>
.progress-container {
width: 50%;
margin: 50px auto;
border: 1px solid #ccc;
background-color: #f5f5f5;
border-radius: 5px;
padding: 5px;
}

.progress-bar {
width: 0%;
height: 30px;
background-color: #4caf50;
border-radius: 5px;
}
</style>
</head>
<body>

<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>

<script>
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}

// You can call the move() function to start the progress bar
// Example: move();
</script>
</body>
</html>
10Q)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Selection Dropdown</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h2>Multiple Selection Dropdown</h2>

<div class="dropdown">
<button onclick="toggleDropdown()" class="dropbtn">Select items</button>
<div id="myDropdown" class="dropdown-content">
<input type="checkbox" id="item1" value="Item 1">
<label for="item1">Item 1</label><br>
<input type="checkbox" id="item2" value="Item 2">
<label for="item2">Item 2</label><br>
<input type="checkbox" id="item3" value="Item 3">
<label for="item3">Item 3</label><br>
</div>
</div>

<script src="script.js"></script>

</body>
</html>
11Q)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataList Tag Example</title>
</head>
<body>
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
</body>
</html>

You might also like