By GokiSoft.com| 19:26 29/08/2022|
Học HTML5 - CSS3

[Source Code] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS - C2206L

Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS


#style.css


body {
	background-color: rgb(255, 255, 240);
}

textarea {
	scrollbar-3dlight-color: #C0C0C0;
	scrollbar-shadow-color: silver;
	scrollbar-arrow-color: black;
	scrollbar-face-color: gray;
}

.imgHelp {
	cursor: help;
	color: blue;
	background-color: #DDFFEE;
	padding: 8px;
	position: absolute;
	right: 30%;
}

.imgHelp:active ~ #main {
	display: none;
}

.imgHelp:active ~ #help {
	display: block;
}

.EmailEditor {
	background-color: #FFFFDD;
}

#main {
	width: 600px;
	background-color: #DDFFEE;
	padding: 10px 20px;
	margin: 0px auto;
}

#main h2 {
	margin-top: 0px;
}

.group {
	margin-bottom: 10px;
	display: flex;
}

.group label {
	width: 20%;
	text-align: right;
	padding-right: 8px;
}

.group input, .group textarea {
	width: 80%;
	resize: none;
}

.group button {
	margin-right: 10px;
}

#help {
	/*position: absolute;*/
	width: 500px;
	/*height: 420px;*/
	margin-top: 10px;
	background-color: #cfc;
	padding-left: 10px;
	padding-right: 10px;
	display: none;
	border: solid 2px  #E4E7E7;
	color:  #303030;
	margin: 0px auto;
}

.Close {
	text-align: right;
	color: blue;
	cursor: hand;
}

ul {
	list-style: square inside url(photos/rowing-boat.png);
}


#status.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Status page</title>
</head>
<body>
<h1>Your message has been successfully sent</h1>
</body>
</html>


#EmailEditor.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Email Form</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<label class="imgHelp">Help</label>

<div id="main">
	<h2>Compose e-mail message</h2>
	<form action="status.html" method="post">
		<div class="group">
			<label>To:</label>
			<input type="text" name="to" class="EmailEditor">
		</div>
		<div class="group">
			<label>From:</label>
			<input type="text" name="from" class="EmailEditor">
		</div>
		<div class="group">
			<label>Cc:</label>
			<input type="text" name="cc" class="EmailEditor">
		</div>
		<div class="group">
			<label>Subject:</label>
			<input type="text" name="subject" class="EmailEditor">
		</div>
		<div class="group">
			<label>Message:</label>
			<textarea rows="5" class="EmailEditor"></textarea>
		</div>
		<div class="group">
			<label></label>
			<button type="submit">Send</button>
			<button type="reset">Cancel</button>
		</div>
	</form>
</div>

<div id="help">
	<h2>-: E-mail Editor Help :-</h2>
	<ul>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
		<li>Vi du 1</li>
	</ul>
</div>
</body>
</html>


#rowing-boat.png


https://gokisoft.com/uploads/stores/49/2022/08/rowing-boat.png


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó