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

by GokiSoft.com - 19:42 30/01/2021 6,431 Lượt Xem



Tải Resource

Bình luận



Chia sẻ từ lớp học

Lã Đức Anh [community,C2010L]

Ngày viết: 01:53 14/03/2021



body{
	background-color: rgb(255,255,240);
	margin-left: 30%;
	padding: 50px;
}

.main{
	width: 400px;
	background-color: #DDFFEE;
	padding: 10px;
	display: block;

}
.container{
	display: flex;
}

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

textarea{
	background-color: #FFFFDD;
}

.form label{
	width: 20%;
	float: left;
	text-align: right;
	padding-right: 5px;
}

.form{
	width: 100%;
	display: flex;
	margin-bottom: 5px;
}

.form input, .form textarea {
	width: 75%;
	border: solid 2px #E4E7E7;
}

.button{
	width: 50%;
	display: flex;
	margin-left: 21%;
}

.help{
	padding: 35px;
}

.but1{
	margin-right: 5px;
}

ul{
	list-style-image: url(bullet.jpg);
}

.main2{
	background-color: #d9ffdf;
	width: 50%;
	list-style-position: inside;
}

.closebutton{
	color: red;
	margin-left: 90%;
}


Lã Đức Anh [community,C2010L]

Ngày viết: 01:53 14/03/2021



<!DOCTYPE html>
<html>
<head>
	<title>Success page</title>
	<meta charset="utf-8">
</head>
<body>
	<h1>Your message has been successfully sent</h1>
</body>
</html>


Lã Đức Anh [community,C2010L]

Ngày viết: 01:53 14/03/2021



<!DOCTYPE html>
<html>
<head>
	<title>GUIDE FOR NOOB</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="main2">
		<h2>-: E-mail editor not helpful :-</h2>
		<ul>
			<li>BLUE TEQILLA</li>
			<li>PINK TEQILLA</li>
			<li>RED TEQILLA</li>
		</ul>
		<a class="closebutton" href="EmailEditor.html">Close</a>
	</div>

	
	
</body>
</html>


Lã Đức Anh [community,C2010L]

Ngày viết: 01:51 14/03/2021



<!DOCTYPE html>
<html>
<head>
	<title>Thiết kế form gửi email</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="main">
				<h2>Compose e-mail message</h2>
			<form method="post" action="Status.html">
			<div class="form">
				<label>To:</label>
				<input required="true" type="email" name="to" class="email-edit">
			</div>
			<div class="form">
				<label>From:</label>
				<input required="true" type="email" name="from" class="email-edit">
			</div>
			<div class="form">
				<label>Cc:</label>
				<input required="true" type="email" name="cc" class="email-edit">
			</div>
			<div class="form">
				<label>Subject:</label>
				<input required="true" type="text" name="subject" class="email-edit">
			</div>
			<div class="form">
				<label>Message:</label>
				<textarea required="true" rows="5" class="textarea"></textarea class="email-edit">
			</div>
			<div class="button">
				<button  class="but1" type="submit">Send</button>
				<button type="reset">Cancel</button>
			</div>
		</div>
		<div class="help">
				<a href="help.html"><img src="Help.jpg"></a>
		</div>
	</div>
</body>
</html>


TRẦN VĂN ĐIỆP [Teacher]

Ngày viết: 19:36 18/02/2021


#success.html


<!DOCTYPE html>
<html>
<head>
	<title>Success page</title>
	<meta charset="utf-8">
</head>
<body>
	<h1>Your message has been successfully sent</h1>
</body>
</html>


#style.css


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

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

.text-help {
	background-color: #DDFFEE;
	padding: 5px;
	font-weight: bold;
	color: blue;
	float: right;
	margin-right: 28%;
}

.main {
	width: 400px;
	background-color: #DDFFEE;
	margin: 0px auto;
	padding: 10px;
	display: block;
}

.help {
	width: 500px;
	height: 220px;
	background-color: #cfc;
	margin: 0px auto;
	padding: 10px;
	border: solid 2px #E4E7E7;
	color: #303030;
	display: block;
}

.form-group {
	width: 100%;
	display: flex;
	margin-bottom: 5px;
}

.form-group label {
	width: 20%;
	float: left;
	text-align: right;
	padding-right: 5px;
}

.form-group input, .form-group textarea {
	width: 75%;
	float: left;
	border: solid 2px #E4E7E7;
}

.form-group button {
	margin-right: 5px;
}

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

.help label {
	color: blue;
	float: right;
	cursor: pointer;
}


#bullet.jpg


https://res.cloudinary.com/wegoup/image/upload/v1613651735/ewndobd8dqvwwwmwajkv.jpg

#guide.html


<!DOCTYPE html>
<html>
<head>
	<title>Guide page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="help">
		<h2>E-Mail Editor Help.</h2>
		<ul>
			<li>Step 1</li>
			<li>Step 2</li>
			<li>Step 3</li>
			<li>Step 4</li>
			<li>Step 5</li>
			<li>Step 6</li>
		</ul>
		<a href="email_editor.html"><label>Close</label></a>
	</div>
</body>
</html>


#email_editor.html


<!DOCTYPE html>
<html>
<head>
	<title>Email Editor page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<span class="text-help"><a href="guide.html">Help</a></span>
	<div class="main">
		<h2>Compose e-mail message.</h2>
		<form method="post" action="success.html">
			<div class="form-group">
				<label>To:</label>
				<input required="true" type="email" name="to" class="email-editor">
			</div>
			<div class="form-group">
				<label>From:</label>
				<input required="true" type="email" name="from" class="email-editor">
			</div>
			<div class="form-group">
				<label>Cc:</label>
				<input required="true" type="email" name="cc" class="email-editor">
			</div>
			<div class="form-group">
				<label>Subject:</label>
				<input required="true" type="text" name="subject" class="email-editor">
			</div>
			<div class="form-group">
				<label>Message:</label>
				<textarea required="true" rows="5" class="email-editor"></textarea>
			</div>
			<div class="form-group">
				<label></label>
				<button type="submit">Send</button>
				<button type="reset">Cancel</button>
			</div>
		</form>
	</div>
</body>
</html>


#guideline.txt


-Overview
	- Chua bai tap
		- css, form, table .v.v
		- Tìm hiểu về layout: Rất quan trong trong phần thiết kế web
		 (div)
	- Test: Kiểm tra kiến thức sau TET

-Kiến thức còn lại
	- Form: Pattern & thuộc tính trong Form
	- Javascript:
	- Storage:
		- localStorage
	- Canvas & 1 số các cách lưu trữ trên browser


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

Tài Liệu Tham Khảo

Đã sao chép!!!