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 BT1988

Liên kết rút gọn:

https://gokisoft.com/1988

Bình luận

avatar
Lã Đức Anh [community,C2010L]
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%;
}


avatar
Lã Đức Anh [community,C2010L]
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>


avatar
Lã Đức Anh [community,C2010L]
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>


avatar
Lã Đức Anh [community,C2010L]
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>


avatar
TRẦN VĂN ĐIỆP [Teacher]
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


avatar
Trần Việt Đức Anh [C2010L]
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>


avatar
Trần Việt Đức Anh [C2010L]
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;
		}
*/


avatar
Trần Việt Đức Anh [C2010L]
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>


avatar
Vũ Ngọc Văn [community,C2010L]
2021-02-01 02:40:33

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

avatar
Vũ Ngọc Văn [community,C2010L]
2021-02-01 02:19:52

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