Scribd
Upload
11 views12 pages

WebTech (P1)

Web Technology Lab Practical 1 AKTU

Uploaded by

dishashukla0104
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
11 views12 pages

WebTech (P1)

Web Technology Lab Practical 1 AKTU

Uploaded by

dishashukla0104
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/ 12

Practical-1

Objective: Write a simple html registration form which stores students details required for
admission process in a university such as First name, Last name, roll no, course, branch, gender,
phone number, subject choice, hobbies and testimonial.

Introduction:
Different types of input tags and buttons used here are:

Important HTML Tags: -

<input>: tag is a fundamental element in HTML, used to create interactive controls for web-
based forms to accept data from users.
<button>: Creates a clickable button.

<form>: Contains interactive controls that users can use to submit data.

<select>: Creates a drop-down list.

<textarea>: Defines a multi-line text input field.

<label>: Defines a label for an <input> element.

Important HTML Attributes: -

type: Specifies the type of <input> or <button>.

value: Specifies the initial value of <input>, <button>, or <option>.

action: Specifies the URL to send the form data to when the form is submitted.

placeholder: Provides a hint to the user of what to enter in an <input> or <textarea>.

class: Specifies one or more class names for an element, which can be used to apply CSS
styles or target elements with JavaScript.
id: Defines a unique identifier for an HTML element, which can be used for styling or
scripting.
name: Specifies a name for <input>, <select>, or <textarea>, which is used to reference form
data.
Important HTML Buttons: -

Basic Button: A simple clickable button.

Submit Button: Used to submit a form.

Reset Button: Used to reset a form to its default values.

Radio Button: select one option from a set of predefined choices.


Checkboxes: allow users to select one or more options from a set of predefined choices.

Program:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>University Admission Form</title>

<style>

/* General Styling */

body {

font-family: 'Arial', sans-serif;

background-color: #f0f5f9;

margin: 0;

padding: 30px;

.form-container {

max-width: 650px;

margin: 0 auto;

background-color: #ffffff;

padding: 40px;

border-radius: 15px;

box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1);

border: none;

h1 {

text-align: center;

color: #333;
font-size: 26px;

margin-bottom: 25px;

font-family: 'Poppins', sans-serif;

.form-group {

margin-bottom: 20px;

.form-group label {

font-weight: bold;

display: block;

margin-bottom: 8px;

color: #555;

.form-group input,

.form-group select,

.form-group textarea {

width: 100%;

padding: 12px;

border: 1px solid #e0e0e0;

border-radius: 10px;

background-color: #f9fafb;

transition: border-color 0.3s ease;

font-size: 15px;

.form-group input[type="radio"],

.form-group input[type="checkbox"] {

width: auto;

margin-right: 10px;
}

.form-group input[type="file"] {

padding: 5px 0;

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

border-color: #a8d5ba;

.form-group textarea {

resize: vertical;

.submit-btn {

width: 100%;

background-color: #a8d5ba;

color: #fff;

padding: 12px;

border: none;

cursor: pointer;

font-size: 16px;

border-radius: 10px;

transition: background-color 0.3s ease;

.submit-btn:hover {

background-color: #8ec1a1;

}
.form-group input[type="radio"] + label,

.form-group input[type="checkbox"] + label {

display: inline;

margin-left: 5px;

.checkbox-group,

.radio-group {

display: flex;

flex-wrap: wrap;

gap: 10px;

.checkbox-group input[type="checkbox"],

.radio-group input[type="radio"] {

margin-right: 8px;

/* Aesthetic Color Scheme */

body {

background-color: #f3e8ff; /* Light pastel lavender background */

.form-container {

background-color: #fff;

padding: 30px;

border-radius: 15px;

box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);

border: none;

h1 {

color: #7d4b94; /* Aesthetic lavender */


font-size: 24px;

.form-group input,

.form-group select,

.form-group textarea {

border: 1px solid #ddd;

padding: 10px;

font-size: 15px;

background-color: #fafafa; /* Light gray */

.form-group label {

color: #7d4b94; /* Soft lavender for label */

.submit-btn {

background-color: #ffd1dc; /* Light pastel pink */

color: #333;

.submit-btn:hover {

background-color: #ffafc0; /* Slightly darker pastel pink */

</style>

</head>

<body>

<div class="form-container">

<h1>University Admission Form</h1>

<form action="submit_form.php" method="post" enctype="multipart/form-data">

<!-- First Name -->

<div class="form-group">

<label for="first_name">First Name:</label>

<input type="text" id="first_name" name="first_name" required>


</div>

<!-- Last Name -->

<div class="form-group">

<label for="last_name">Last Name:</label>

<input type="text" id="last_name" name="last_name" required>

</div>

<!-- Roll No -->

<div class="form-group">

<label for="roll_no">Roll No:</label>

<input type="text" id="roll_no" name="roll_no" required>

</div>

<!-- Course -->

<div class="form-group">

<label for="course">Course:</label>

<select id="course" name="course" required>

<option value="B.Tech">B.Tech</option>

<option value="M.Tech">M.Tech</option>

<option value="MBA">MBA</option>

<option value="PhD">PhD</option>

</select>

</div>

<!-- Branch -->

<div class="form-group">

<label for="branch">Branch:</label>

<input type="text" id="branch" name="branch" required>

</div>

<!-- Gender -->


<div class="form-group">

<label>Gender:</label>

<div class="radio-group">

<input type="radio" id="male" name="gender" value="Male" required>

<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="Female">

<label for="female">Female</label>

<input type="radio" id="other" name="gender" value="Other">

<label for="other">Other</label>

</div>

</div>

<!-- Phone Number -->

<div class="form-group">

<label for="phone_number">Phone Number:</label>

<input type="tel" id="phone_number" name="phone_number" required>

</div>

<!-- Subject Choice (Checkboxes) -->

<div class="form-group">

<label for="subjects">Subject Choice:</label>

<div class="checkbox-group">

<input type="checkbox" id="subject1" name="subjects[]" value="Mathematics">

<label for="subject1">Mathematics</label>

<input type="checkbox" id="subject2" name="subjects[]" value="Physics">

<label for="subject2">Physics</label>

<input type="checkbox" id="subject3" name="subjects[]" value="Chemistry">

<label for="subject3">Chemistry</label>
<input type="checkbox" id="subject4" name="subjects[]" value="Computer Science">

<label for="subject4">Computer Science</label>

</div>

</div>

<!-- Hobbies (Checkboxes) -->

<div class="form-group">

<label for="hobbies">Hobbies:</label>

<div class="checkbox-group">

<input type="checkbox" id="hobby1" name="hobbies[]" value="Reading">

<label for="hobby1">Reading</label>

<input type="checkbox" id="hobby2" name="hobbies[]" value="Sports">

<label for="hobby2">Sports</label>

<input type="checkbox" id="hobby3" name="hobbies[]" value="Music">

<label for="hobby3">Music</label>

<input type="checkbox" id="hobby4" name="hobbies[]" value="Traveling">

<label for="hobby4">Traveling</label>

</div>

</div>

<!-- Testimonial -->

<div class="form-group">

<label for="testimonial">Testimonial:</label>

<textarea id="testimonial" name="testimonial" rows="4"></textarea>

</div>

<!-- Photo Upload -->

<div class="form-group">
<label for="photo">Upload Your Photo:</label>

<input type="file" id="photo" name="photo" accept="image/*" required>

</div>

<!-- Submit Button -->

<button type="submit" class="submit-btn">Submit</button>

</form>

</div>

</body>

</html>
Output:

You might also like