Scribd Logo
Upload

Welcome to Scribd!

  • Lab 2 (Documentation)

    Uploaded by

    theoreticalsand
    4 views3 pages

    Original Title

    Lab 2(Documentation)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views3 pages

    Lab 2 (Documentation)

    Uploaded by

    theoreticalsand

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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