By GokiSoft.com| 21:22 16/10/2023|

Học HTML5 - CSS3

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

Tải Resource

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Lã Đức Anh

2021-03-13 18:53:16

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

2021-03-13 18:53:08

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

2021-03-13 18:53:00

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

2021-03-13 18:51:52

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

2021-02-18 12:36:13

#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

Trần Việt Đức Anh

2021-02-05 09:30:00

<!DOCTYPE html>
<html>
<head>
	<title>Status</title>
</head>
<body>
	<h3><b>Your message has been successfully sent</b></h3>
</body>
</html>

Trần Việt Đức Anh

2021-02-05 09:29:47

body 
{
	background-color:  rgb(255,255,240);
	border-left: 20%;
}

.form-group textarea 
{
	scrollbar-3dlight-color: #C0C0C0;
	scrollbar-shadow-color: silver;
	scrollbar-arrow-color: black;
	scrollbar-face-color: gray;
	/* width: 80% !important; */
}

.imgHelp
{
	cursor: help;
/*	color: blue;
	background-color: #DDFFEE;
	top: 10px;
	right: 10px;
	padding: 10px;
	float: right;
	margin-right: 35%;
*/
}

.EmailEditor 
{
	background-color: #FFFFDD;
}

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

#help 
{
	position: absolute;
	width: 500px;
	height: 420px;
	margin-top: 10px;
	background-color: #cfc;
	padding: 10px 10px;
	display: none;
	border: solid #E4E7E7 2px;	
	text-decoration: #303030;
}

.Close 
{
	text-align: right;
	text-decoration-color: blue;
	cursor: hand;
	/* float: right; */
}

ul li 
{
	list-style-image: url("bullet.jpg");
	list-style-type: square;
	list-style-position: inside;
}

.form-group 
{
	display: flex;
	width: 100%;
	margin: 10px 0px;
}

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

.form-group input.EmailEditor {
	float: left;
	width: 50% !important;
}

/*		.form-group button {
			margin-right: 10px;
			margin-bottom: 10px;
		}
*/

Trần Việt Đức Anh

2021-02-05 09:29:16

<!DOCTYPE html>
<html>
<head>
	<title>E-Mail Editor</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<label id="imgHelp" class="imgHelp" onclick="clickHelp()"><img src="help.jpg"></label>
	<div id="main">
		<h2 style="text-align: center; padding-top: 10px;">Compose e-mail message</h2>
		<div class="form-group">
			<label class="form-label">To:</label>
			<input type="text" name="to" class="EmailEditor">
		</div>

		<div class="form-group">
			<label class="form-label">From:</label>
			<input type="text" name="from" class="EmailEditor">
		</div>

		<div class="form-group">
			<label class="form-label">Cc:</label>
			<input type="text" name="cc" class="EmailEditor">
		</div>

		<div class="form-group">
			<label class="form-label">Subject:</label>
			<input type="text" name="subject" class="EmailEditor">
		</div>

		<div class="form-group">
			<label class="form-label">Message:</label>
			<textarea rows="5" class="EmailEditor" name="message"></textarea>
		</div>

		<div class="form-group">
			<label class="form-label"></label>
			<a href="Status.html"><button>Send</button></a>
			<button>Cancel</button>
		</div>

	</div>

	<div id="help">
		<h2> -: E-mail Editor Help :- </h2>
		<ul>
			<li>
				<b>
					To and CC:
				</b>
				<br/>
				<b>To</b> and <b>CC</b> boxes allow you to enter the e-mail addresses of the recepients to whom to message has to sent Recipients will be able to see who else was sent the message by looking at the contents of the <b>To</b> and <b>CC</b> boxes.
			</li>
			<li>
				<b>
					Subject:
				</b>
				<br/>
				The <b>Subject</b> box allows you to enter meaningful summary of the message.
			</li>
			<li>
				<b>
					Message:	
				</b>
				<br/>
				The <b>Message</b> TextArea allows you to enter the text of your message.
			</li>
		</ul>
		<label class="Close" onclick="clickClose()">Close</label>
	</div>

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

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

Vũ Ngọc Văn

2021-02-01 02:40:33

https://vungocvan-aptech.herokuapp.com/0130/EmailEditor.html

Vũ Ngọc Văn

2021-02-01 02:19:52

https://github.com/vanvu25894/02-HTML/tree/main/0130

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

Tải Resource

Tags:

Phản hồi từ học viên

5

Lã Đức Anh

Lã Đức Anh

Lã Đức Anh

Lã Đức Anh

TRẦN VĂN ĐIỆP

#success.html

#style.css

#bullet.jpg

#guide.html

#email_editor.html

#guideline.txt

Trần Việt Đức Anh

Trần Việt Đức Anh

Trần Việt Đức Anh

Vũ Ngọc Văn

Vũ Ngọc Văn