HTML5 - CSS3 Tutorial

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

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

#bullet.jpg

Name: Gozic Pioneering Agentic AI Technology Digital Transformation
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Cầu Giấy, Hà Nội, 100000, VN
Telephone: 000000000
Price range: VND

https://res.cloudinary.com/wegoup/image/upload/v1602660803/cqxxhrtrmtpfkmgcqh7w.jpg

#Help.jpg

https://res.cloudinary.com/wegoup/image/upload/v1602660804/kcckpj0klzlwqtlqwmft.jpg

#status.html

<!DOCTYPE html>
<html>
<head>
	<title>Status page</title>
</head>
<body>
<h1>Status page</h1>
</body>
</html>

#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;
	width: 90%;
}

.imgHelp {
	cursor: pointer;
	color: blue;
	background-color: #DDFFEE;
	right: 25%;
	position: absolute;
}

.EmailEditor {
	background-color: #FFFFDD;
	border: solid grey 1px;
}

#main {
	width: 400px;
	background-color: #DDFFEE;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0px auto;
}

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

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

ul {
	list-style-image: url('photos/bullet.jpg');
	list-style-type: square;
	list-style-position: inside;
}

.row {
	width: 100%;
	display: flex;
	margin-bottom: 15px;
}

input {
	width: 90%;
}

.col-md-4 {
	width: 33.33%;
	float: left;
	text-align: right;
	padding-right: 10px;
}

.col-md-8 {
	width: 66.67%;
	float: left;
	padding-right: 10px;
}

button {
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
}

#vidu.html

<!DOCTYPE html>
<html>
<head>
	<title>HTML/CSS Tutorial</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="imgHelp" onclick="clickHelp()">Help</button>
<div id="main">
	<form action="status.html" method="post">
	<h2>Compose e-mail message</h2>
	<div class="row">
		<div class="col-md-4">To:</div>
		<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">From:</div>
		<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">Cc:</div>
		<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">Subject:</div>
		<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">Message:</div>
		<div class="col-md-8">
			<textarea rows="5" class="EmailEditor"></textarea>
		</div>
	</div>
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-8">
			<button>Send</button>
			<button>Cancel</button>
		</div>
	</div>
	</form>
</div>
<div id="help">
	<h2>-: E-mail Editor Help :-</h2>
	<ul>
		<li>ABC</li>
		<li>ABC</li>
		<li>ABC</li>
	</ul>
	<div class="Close" onclick="closeHellp()">Close</div>
</div>

<script type="text/javascript">
	function clickHelp() {
		document.getElementById('help').style.display = 'block';
		document.getElementById('main').style.display = 'none';
	}

	function closeHellp() {
		document.getElementById('help').style.display = 'none';
		document.getElementById('main').style.display = 'block';
	}
</script>
</body>
</html>

Mục Lục