Scribd
Upload
10 views3 pages

Lab 2 (Documentation)

The document describes the development of a simple website form using HTML and CSS. It establishes the basic HTML structure including <head>, <body>, and <form> tags. Within the form, it adds labels and input fields for name, email, password, gender (using radio buttons), and country (using a drop down select). It includes some basic CSS styling to format the form fields, labels, and overall layout. The CSS focuses on styling elements like the body, form container, labels, radio buttons, submit button, and select dropdown.

Uploaded by

theoreticalsand
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
10 views3 pages

Lab 2 (Documentation)

The document describes the development of a simple website form using HTML and CSS. It establishes the basic HTML structure including <head>, <body>, and <form> tags. Within the form, it adds labels and input fields for name, email, password, gender (using radio buttons), and country (using a drop down select). It includes some basic CSS styling to format the form fields, labels, and overall layout. The CSS focuses on styling elements like the body, form container, labels, radio buttons, submit button, and select dropdown.

Uploaded by

theoreticalsand
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/ 3

To develop the website in this zip file, I use simple HTML commands and some CSS styling to

enhance its applicability. Initially, I established the general structure using HTML. The general
structure looking like:
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<form>

</form>
</body>
</html>
Here I again establish some connections that I will need through out the project, specifically I
link the CSS file and establish the title of the website:
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Simple Form</title>

After this is done and dusted, we move on to the gen structure by establishing the form tags.
Inside these tags, we write 4 labels(name, email, password, gender, and finally country of
origin). Name, email, and password structure are the same. Generally:
<label for="name">Name:</label><br/>
<!--Here for name we can replace "Password" or "Email"-->
<input type="text" id="name" name="name" required /><br/><br/>
<!--The above comment applies to this line of code also-->

For the gender section, as the task suggests, we will be using radio buttons. To do so we create
a new container inside the form tag:
<div class="gender">
<input type="radio" id="male" name="gender" value="male" />
<label for="male">Male</label><br />
<input type="radio" id="female" name="gender" value="female" />
<label for="female">Female</label><br />
<input type="radio" id="non-binary" name="non-binary" />
<label for="non-binary">Rather not say</label><br /><br />
</div>
The last of this project would be us making a dropdown menu with the selection of countries.
<select id="country" name="country" required>
<option value="" disabled selected>Select your country</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Russia">Russia</option>
<option value="Turkey">Turkey</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>

The only thing to note here is that we diable the first choice, since it only plays the role of a
placeholder and as a selection guide.
The CSS of this project is quite simple, the only thing done for this project is styling the form
tags.
We fix the margin and padding in the body, style the header and labels like this:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

h2 {
text-align: center;
margin-top: 20px;
}

form {
max-width: 400px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-bottom: 5px;
}

After this, the only thing being worked on was the input forms, which were quite basic.
By basic I mean, color change, margining, padding, and text-stylizing.
input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type="radio"] {
display: inline-block;
margin-right: 10px;
}

input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
}

input[type="submit"]:hover {
background-color: #45a049;
}

Due to some issues with the selection boxes I had to style the radio buttons, by putting the
display into flex and changing the flex-direction to row.
.gender {
display: flex;
flex-direction: row;
align-items: center;
}
.gender input[type="radio"] {
margin-bottom: 8.5px;
margin-right: 10px;
vertical-align: middle;}

You might also like