Scribd
Upload
46 views6 pages

4 PRGM

Uploaded by

farhanjamadarfn2
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
46 views6 pages

4 PRGM

Uploaded by

farhanjamadarfn2
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

4..Develop HTML page named as “registration.

html” having variety of HTML input


elements with background colors, table for alignment & provide font colors & size using CSS
styles.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Registration Form</title>

<style>

body {

background-color: #f4f4f4;

font-family: Arial, sans-serif;

h2 {

color: #333;

text-align: center;

.form-container {

width: 50%;

margin: auto;

background-color: #fff;

padding: 20px;

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

table {

width: 100%;

border-spacing: 10px;
}

input[type="text"], input[type="email"], input[type="password"], select {

width: 100%;

padding: 10px;

font-size: 16px;

border: 1px solid #ccc;

border-radius: 5px;

input[type="radio"], input[type="checkbox"] {

margin-right: 10px;

input[type="submit"] {

background-color: #28a745;

color: #fff;

padding: 10px 15px;

font-size: 16px;

border: none;

border-radius: 5px;

cursor: pointer;

input[type="submit"]:hover {

background-color: #218838;

label {

font-size: 16px;

color: #555;

}
</style>

</head>

<body>

<h2>RegistrationForm</h2>

<divclass="form-container">

<form action="#" method="post">

<table>

<tr>

<td><label for="name">Name:</label></td>

<td><input type="text"id="name" name="name" placeholder="Enter your fullname"


required></td>

</tr>

<tr>

<td><label for="email">Email:</label></td>

<td><input type="email"id="email" name="email" placeholder="Enter your email


address" required></td>

</tr>

<tr>

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

<td><input type="password"id="password" name="password" placeholder="Create a


password" required></td>

</tr>

<tr>

<td><label>Gender:</label></td>

<td>

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

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

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

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

</tr>

<tr>

<td><label for="country">Country:</label></td>

<td>

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

<option value="">--Select Country--</option>

<option value="India">India</option>

<option value="USA">USA</option>

<option value="UK">UK</option>

</select>

</td>

</tr>

<tr>

<td><label>Hobbies:</label></td>

<td>

<input type="checkbox" id="reading" name="hobbies" value="Reading">

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

<inputtype="checkbox" id="sports" name="hobbies" value="Sports">

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

<input type="checkbox" id="music" name="hobbies" value="Music">

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

</td>

</tr>

<tr>

<td></td>

<td><input type="submit" value="Register"></td>


</tr>

</table>

</form>

</div>

</body>

</html>

Output:

Explanation of the Code:


1. HTML Structure:
o The <!DOCTYPE html> declaration defines the document as an HTML5
document.
o The <html> element is the root of the HTML page. Inside the <head>,
metadata like character encoding and title are defined.
o The <body> contains the form that is enclosed within a <div> (class="form-
container") for styling purposes.
2. Styling with CSS:
o The body is styled with a light grey background (#f4f4f4) and the font is set to
Arial.
o The .form-container adds a centered form with padding and shadow for
aesthetics.
o Input fields such as text, email, password, and select dropdowns are given
uniform styles with padding and border-radius for better UI experience.
o Submit button (input[type="submit"]) has a green background that changes on
hover, giving a visual cue to the user.
3. Table for Alignment:
o The form elements are placed in a table with rows and cells (<tr> and <td>)
for alignment. This ensures the labels and input fields are properly aligned
across the form.
4. HTML Form Elements:
o Text Input (<input type="text">): For entering the user's name.
o Email Input (<input type="email">): For entering the user's email address.
o Password Input (<input type="password">): To create a password.
o Radio Buttons (<input type="radio">): To select gender.
o Dropdown (<select>): To choose a country from the list.
o Checkboxes (<input type="checkbox">): To select hobbies.
o Submit Button (<input type="submit">): To submit the form data.
5. Placeholder and Required Attribute:
o Each input field includes the placeholder attribute to give users guidance on
what to input.
o The required attribute ensures that fields are not left blank when submitting.

You might also like