Create a directory with your name that contains all files and folders. Inside th
ID: 3728266 • Letter: C
Question
Create a directory with your name that contains all files and folders.
Inside the root directory that holds your name, create two subfolders for images and pages.
In the image folder, add a picture of your choice, and add three pages in the pages folder.
The first page (login.html) contains username, password, and button. When you click the button, you should be transferred in the second page (register.html).
In the second page, you must include the following:
1-Text Box
2-Radio Button
3-Checkbox
4-Select Box (drop-down list)
5-Textarea (for comment)
Button which navigates you to the third page (content.html)
In the third page (content.html), add what we have learned so far and be creative. Also, add a hyperlink to navigate you to login page.
and please show the output with it
thanks.
Explanation / Answer
login.html
<html>
<head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f5;width:50%;}
input[type=text], input[type=password] {
width: 30%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
align:center;
}
button {
background-color: #13A8F0;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 20%;
}
</style>
</head>
<body>
<h2>Login Form</h2>
<form >
<div class="container">
<label for="userName"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="userName" required>
<br/>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<br/>
<button type="button">Login</button>
</div>
</form>
</body>
</html>
Register.html
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}
input[type=text] {
width: 15%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
width: 20%;
}
}
</style>
<body>
<form action="/action_page.php">
<div class="container">
<h1>Sign Up</h1>
<hr>
<label for="name"><b>Name</b></label><br/>
<input type="text" placeholder="Enter Name" name="name" required>
<br/>
<label for="gender"><b>Select gender</b></label>
<br/>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
<br/>
<label for="termas"><b> Accept Terms and conditions</b></label>
<input type="checkbox" checked="checked" name="terms">
<br/>
<label for="Hobbies"><b> Hobbies</b></label>
<select name="Hobbies">
<option value="Cricket">Cricket</option>
<option value="Soccer">Soccer</option>
</select>
<br/>
<label for="description"><b> Hobbies</b></label>
<textarea name = "description" rows="4" cols="50">
</textarea><br/>
<button type="button">Sign Up</button>
</div>
</form>
</body>
</html>
content.html
<html>
<head>
<style>
#img1 {
border-radius: 50%;
}
#img2 {
border-radius: 8px;
}
</style>
</head>
<body>
<img src="C:\Users ame\Desktop\TestHtml\Images\sun.jpg" id="img1" alt="Paris" width="300" height="300"><br/>
<img src="C:\Users ame\Desktop\TestHtml\Images\sun.jpg" id="img2" alt="Paris" width="300" height="300">
<a href="login.html" >Click here to login</a>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.