IMG-LOGO
Trang Chủ Chủ Đề [Share Code] - Hướng dẫn tạo form gửi mail html5/css - Javascript
× 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

[Share Code] - Hướng dẫn tạo form gửi mail html5/css - Javascript

by TRẦN VĂN ĐIỆP - 23:37 05/06/2020 1,379 Lượt Xem

Hướng dẫn chữa bài tập

Examination & Test + Ôn tập HTML/CSS/JS - Lập Trình HTML5/CSS/JS



#custom.js


function showHelp() {
	var helpTag = document.getElementById('help')
	helpTag.style.display = 'block';

	var mainTag = document.getElementById('main')
	mainTag.style.display = 'none';
}

function closeHelp() {
	var helpTag = document.getElementById('help')
	helpTag.style.display = 'none';

	var mainTag = document.getElementById('main')
	mainTag.style.display = 'block';
}


#EmailEditor.html


<!DOCTYPE html>
<html>
<head>
	<title>Email Editor - Online</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="main">
		<label class="title">Compose Email - Message</label>
		<label class="button-help" onclick="showHelp()">HELP</label>
		<form method="post" action="status.html">
			<div class="item">
				<span>To: </span>
				<input type="text" name="to" class="email-editor">
			</div>
			<div class="item">
				<span>From: </span>
				<input type="text" name="from" class="email-editor">
			</div>
			<div class="item">
				<span>Cc: </span>
				<input type="text" name="cc" class="email-editor">
			</div>
			<div class="item">
				<span>Subject: </span>
				<input type="text" name="subject" class="email-editor">
			</div>
			<div class="item">
				<span>Message: </span>
				<textarea name="message" rows="5" class="email-editor"></textarea>
			</div>
			<div class="item">
				<span></span>
				<button>Send</button>
				<button>Cancel</button>
			</div>
		</form>
	</div>
	<div id="help">
		<h2>Help ...</h2>
		<ul>
			<li>Line 1</li>
			<li>Line 1</li>
			<li>Line 1</li>
			<li>Line 1</li>
			<li>Line 1</li>
			<li>Line 1</li>
		</ul>
		<label class="close" onclick="closeHelp()">Close</label>
	</div>

	<script type="text/javascript" src="custom.js"></script>
</body>
</html>


#status.html


<!DOCTYPE html>
<html>
<head>
	<title>Status Page</title>
</head>
<body>
	<h1>Welcome To 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: 80%;
	float: left;
}

.img-help {
	cursor: help;
}

.email-editor {
	background-color: #FFFFDD;
}

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

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

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

ul {
	/*https://res.cloudinary.com/ziczacgroup/image/upload/v1591359637/mtflqtbxgkt25cpy8k7i.jpg*/
	list-style: square inside url('https://res.cloudinary.com/ziczacgroup/image/upload/v1591359637/mtflqtbxgkt25cpy8k7i.jpg');
}

span {
	width: 20%;
	float: left;
	text-align: right;
	padding-right: 10px;
}

input {
	width: 80%;
	float: left;
}

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

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



.button-help {
	float: right;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 22px;
	cursor: pointer;
}

.title {
	float: left;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 22px;
}


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!!!