Scribd
Upload
49 views9 pages

HTML

The document contains code for an HTML form with various input fields like text, password, select, and radio buttons. It has fields for collecting personal details like name, address, gender, age etc. The form is centered on the page inside a table with appropriate labels and uses CSS for styling.

Uploaded by

himanshu singh
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
49 views9 pages

HTML

The document contains code for an HTML form with various input fields like text, password, select, and radio buttons. It has fields for collecting personal details like name, address, gender, age etc. The form is centered on the page inside a table with appropriate labels and uses CSS for styling.

Uploaded by

himanshu singh
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/ 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: [email protected]">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