Scribd
Upload
22 views6 pages

Jatin

Uploaded by

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

Jatin

Uploaded by

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

28. Write HTML code to create Option Button with suitable example.

Ans : Here’s an example of HTML code that creates an option button (radio button) with a
group of related options. Radio buttons allow users to select one option from a set.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio Button Example</title>
</head>
<body>
<h2>Choose your favorite fruit</h2>
<form action="">
<input type="radio" id="apple" name="fruit" value="Apple">
<label for="apple">Apple</label><br>
<input type="radio" id="banana" name="fruit" value="Banana">
<label for="banana">Banana</label><br>
<input type="radio" id="orange" name="fruit" value="Orange">
<label for="orange">Orange</label><br>
<input type="radio" id="grape" name="fruit" value="Grape">
<label for="grape">Grape</label><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Explanation:
 <input type="radio">: Defines the radio button.
o name="fruit": This groups the radio buttons, so only one can be selected at a
time.
o id="apple" and others: Unique identifiers for each radio button.
o value="Apple": The value sent when the form is submitted.
 <label>: Provides a clickable label for each radio button. It's associated with the
corresponding radio button using the for attribute.
 <form>: Encloses the radio buttons within a form. The form can be submitted with the
selected option.

29 Write HTML code to create Check Box with suitable example.


Ans : Here’s an example of HTML code that creates checkboxes, allowing users to select
multiple options from a list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Example</title>
</head>
<body>
<h2>Select your preferred programming languages</h2>
<form action="">
<input type="checkbox" id="html" name="languages" value="HTML">
<label for="html">HTML</label><br>
<input type="checkbox" id="css" name="languages" value="CSS">
<label for="css">CSS</label><br>
<input type="checkbox" id="javascript" name="languages" value="JavaScript">
<label for="javascript">JavaScript</label><br>
<input type="checkbox" id="python" name="languages" value="Python">
<label for="python">Python</label><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Explanation:
 <input type="checkbox">: Defines a checkbox.
o name="languages": This attribute groups the checkboxes under the same
name, so they can be identified together when the form is submitted.
o id="html" and others: Unique identifiers for each checkbox.
o value="HTML": The value that is sent when the form is submitted if that
particular checkbox is checked.
 <label>: Provides a clickable label for each checkbox, associated with the checkbox
using the for attribute.

30. Write HTML code to design online form for CSVTU Examination.
Ans : Here’s an example of HTML code to design an online form for CSVTU Examination.
This form collects basic student information and examination details.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSVTU Examination Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
}
form {
background-color: #ffffff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
max-width: 600px;
margin: auto;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, textarea, button {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007BFF;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSVTU Examination Form</h1>
<form action="#" method="post">
<!-- Personal Details -->
<h2>Personal Details</h2>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your full name"
required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"
required>
<label for="phone">Mobile Number:</label>
<input type="tel" id="phone" name="phone" placeholder="Enter your mobile number"
required>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="3" placeholder="Enter your address"
required></textarea>
<!-- Academic Details -->
<h2>Academic Details</h2>
<label for="enrollment">Enrollment Number:</label>
<input type="text" id="enrollment" name="enrollment" placeholder="Enter your
enrollment number" required>
<label for="branch">Branch:</label>
<select id="branch" name="branch" required>
<option value="">Select your branch</option>
<option value="cse">Computer Science & Engineering</option>
<option value="mech">Mechanical Engineering</option>
<option value="civil">Civil Engineering</option>
<option value="ece">Electronics & Communication Engineering</option>
<option value="ee">Electrical Engineering</option>
</select>
<label for="semester">Semester:</label>
<select id="semester" name="semester" required>
<option value="">Select your semester</option>
<option value="1">1st Semester</option>
<option value="2">2nd Semester</option>
<option value="3">3rd Semester</option>
<option value="4">4th Semester</option>
<option value="5">5th Semester</option>
<option value="6">6th Semester</option>
<option value="7">7th Semester</option>
<option value="8">8th Semester</option>
</select>
<!-- Examination Details -->
<h2>Examination Details</h2>
<label for="exam-type">Examination Type:</label>
<select id="exam-type" name="exam-type" required>
<option value="">Select examination type</option>
<option value="regular">Regular</option>
<option value="backlog">Backlog</option>
</select>
<label for="subjects">Subjects (Enter comma-separated codes):</label>
<textarea id="subjects" name="subjects" rows="3" placeholder="e.g., CS101, CS102"
required></textarea>
<!-- Submission -->
<button type="submit">Submit Form</button>
</form>
</body>
</html>

Key Features:
1. Personal Details: Includes fields for name, date of birth, email, phone, and address.
2. Academic Details: Includes enrollment number, branch, and semester.
3. Examination Details: Allows selection of the exam type and input for subjects.
4. Responsive Design: The form adjusts to different screen sizes for better usability
5. Validation: Fields marked as required to ensure all necessary information is provided.

You might also like