Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    himanshu singh
    6 views9 pages

    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
    6 views9 pages

    HTML

    Uploaded by

    himanshu singh

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 9

    HimansHu singH

    21bci0049
    mern full stack
    task-1
    Html

    Index 1.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>

    <style>

    div {
    width: 600px;
    height: 330px;
    border: 0px solid #8E44AD ;
    margin: 0px;
    }

    .spacing{
    margin-left: 70%;
    }

    </style>

    <div>
    <form action="/action.php">

    <p>First Name:
    <input type="text" placeholder="Full Name" class="spacing"></p>
    <br>
    <p> Last Name:
    <input type="text" placeholder="Username" class="spacing"></p>
    <br>
    <p>password:
    <input type="password" placeholder="password" class="spacing"></p>
    <br>
    <p>re-password:
    <input type="password" placeholder="re-assword" class="spacing"></p>
    <br>
    <p>Address:
    <input type="text" placeholder="Address" class="spacing"></p>
    <br>
    <p>Age:
    <input type="text" placeholder="Age" class="spacing"></p>
    <br>

    <label>Gender:</label>
    <select name="Gender" class="spacing">
    <option value="Male">Male</option>
    <option value="Female">Female</option>>
    <option value="Others">Others</option>>

    </select>

    <br>
    <br>

    <button>
    <p>Save</p>
    </button>

    </form>
    </div>
    </body>
    </html>

    Output:
    Index 2:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css
    ">

    <style>
    table {
    width: 70%; /* Make the table fill the available width */
    border-collapse: collapse;
    }

    th, td {
    padding: 0px; /* Add some padding for better spacing */
    border: 2px solid #000000; /* Add borders for better visualization
    */
    }

    input[type="text"], input[type="email"],
    input[type="password"],input[type="number"],input[type="tel"],input[type="opti
    on"] {
    width: 100%; /* Make the input elements fill the entire column */
    box-sizing: border-box; /* Include padding and border in the width
    */
    margin: 0; /* Remove margins */
    padding: 10px; /* Add padding for spacing inside the input */
    }
    textarea {
    width: 100%; /* Make the textarea fill the entire column */
    box-sizing: border-box; /* Include padding and border in the width
    */
    resize: vertical; /* Allow vertical resizing */
    }
    select {
    width: 100%; /* Make the select element fill the entire column */
    }
    tr td:first-child {
    font-weight: bold;
    }
    </style>
    <style>
    .checkbox-container {
    margin-right: 20px; /* Adjust the margin to control the space
    between checkboxes */
    }
    .checkbox-container1 {
    display: inline-block;
    margin-right: 20px;
    margin-left: 10px; /* Adjust the margin to control the space
    between checkboxes */
    }
    .beechme{
    text-align: center;
    }

    </style>
    </head>
    <body>
    <h1 align="center"> <font color="blue"> Registration Form</font> </h1>
    <form>
    <div>
    <table border="1" width="40%" height="600px" align="center" >
    <tr>
    <td>First Name</td>
    <td><input type="text"/></td>
    </tr>
    <tr>
    <td>Last Name</td>
    <td><input type="text"/></td>
    </tr>
    <tr>
    <td>Email</td>
    <td><input type="email"/></td>
    </tr>
    <tr>
    <td>Password</td>
    <td><input type="password"/></td>
    </tr>
    <tr>
    <td>Re-enter Password</td>
    <td><input type="password"/></td>
    </tr>
    <tr >
    <td>Gender:</td>
    <th align="left">
    <input type="radio" name="gender">Male <br><hr>
    <input type="radio" name="gender">Female
    </th>
    </tr>
    <tr>
    <td>Age:</td>
    <td><input type="number"/></td>
    </tr>
    <tr>
    <td>Phone Number:</td>
    <td><input type="tel"/></td>
    </tr>
    <tr>
    <td>Address</td>
    <td><textarea name="Address" rows="7"required></textarea></td>
    </tr>
    <tr>
    <td>State</td>
    <td>
    <select>
    <option></option>
    <option>Bengal</option>
    <option>UP Bihar</option>
    <option>Marathaa</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>Country</td>
    <td>
    <select>
    <option>Choose your country</option>
    <option>India</option>
    <option>UP Bihar</option>
    <option>Marathaa</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>Languages Known</td>
    <td>
    <label class="checkbox-container"><input type="checkbox"
    name="Hindi" value="Hindi" >English</label>
    <label class="checkbox-container"><input type="checkbox"
    name="Hindi" value="Hindi">Kannada</label>
    <label class="checkbox-container"><input type="checkbox"
    name="Hindi" value="Hindi">Telugu</label>
    <label class="checkbox-container"><input type="checkbox"
    name="Hindi" value="Hindi">Hindi</label>
    </td>
    </tr>
    <tr>
    <td colspan="2"><label class="checkbox-container1"><input
    type="checkbox" name="Hindi" value="Hindi" >Hereby I declare all the given
    details are true</label></td>
    </tr>
    <tr align="right">
    <td colspan="2"><label>Log in to <a
    href="https://drive.google.com/drive/folders/1LvFSzp4FnE5cmxpI6DZY5HAVcQ5RP9QB
    ">Ethnus</a>website</label></td>
    </tr>

    </table>
    <div class="beechme"><button type="submit">Register</button></div>

    </div>
    </form>
    </body>
    </html>
    Output:

    Index 3:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    </head>
    <body>
    <style>
    p{
    text-align: left;
    }

    div {
    background-color: rgb(213, 207, 207);
    width: 600px;
    height: 100px;
    border: 1px solid #8E44AD ;
    margin: 0;
    }
    </style>

    <div>
    <p><b>Click any of the following links</b></p>

    <a href="https://www.google.com/" target="__main">Opens in New |</a>


    <a href="https://www.google.com/">Opens in Self |</a>
    <a href="https://www.google.com/" target="__parent">Opens in Parent |</a>
    <a href="https://www.google.com/" target="__body">Opens in Body |</a>
    <a href="mailto: arnabakshi9@gmail.com">Send email</a>
    </div>
    </body>
    </html>

    Output:

    Index 4:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>

    <style>
    div {
    width: 300px;
    height: 150px;
    border: 1px solid #8E44AD ;
    margin: 0;
    }
    </style>

    <div>
    <p><b>Lists can be nested(lists inside list)</b></p>

    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <ul type="circle">
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
    <li>Milk</li>
    </ul>
    </div>

    </body>
    </html>

    Output:

    You might also like