Scribd
Upload
16 views

Day 3 Assignment PDF

Yaskin

Uploaded by

Neeraj Katam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Day 3 Assignment PDF

Yaskin

Uploaded by

Neeraj Katam
Copyright
© © All Rights Reserved
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