IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 [Share Code] - Hướng dẫn tạo form gửi mail html5/css - Javascript

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

by GokiSoft.com - 23:37 05/06/2020 4,299 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;
}


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!