IMG-LOGO
Trang Chủ Chủ Đề [Share Code] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS
× 1) [Share Code] Tìm hiểu khái niệm domain (dns) + hosting/server + thẻ căn bản html + css - Lession 1 2) [Share Code] - Hướng dẫn tạo form gửi mail html5/css - Javascript 3) [Share Code] Hướng dẫn thiết kế Layout bằng HTML5/CSS - Tạo layout website HTML5/CSS 4) [Share Code] Tạo website đầu tiên - HelloWorld - Lập trình HTML/CSS/JS 5) Big first letter - css 6) [Share Code] Tìm hiểu CSS - HTML - Lập trình HTML/CSS/JS 7) [Share Code] Hướng dẫn tìm hiểu tags căn bản trong HTML/CSS - Lập trình HTML/CSS/JS 8) [Share Code] Hướng dẫn thiết kế layout HTML/CSS - Lập trình HTML/CSS/JS 9. [Share Code] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

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

by TRẦN VĂN ĐIỆP - 14:33 14/10/2020 1,150 Lượt Xem

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




#bullet.jpg


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>


Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Danh Sách Bài Học

Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!