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)

Vũ Trung Kiên

2020-12-10 13:05:08

#EmailEditor.html

<!DOCTYPE html>
<html>
<head>
	<title>E-Mail Editor</title>
	<meta charset="utf-8">
	<style type="text/css">
		body 
		{
			background-color:  rgb(255,255,240);
		}
		.EmailEditor 
		{
			background-color: #FFFFDD;
		}
		#main {
			width: 400px;
			background-color: #DDFFEE;
			padding: 0px 10px;
			margin: 0px auto;
		}
		.imgHelp
		 {
			cursor: pointer;
			color: blue;
			background-color: #DDFFEE;
			top: 10px;
			right: 10px;
			padding: 10px;
			float: right;
			margin-right: 35%;
		}
		#help 
		{
			width: 500px;
			height: 420px;
			top: 10px;
			background-color: #cfc;
			padding: 0px 10px;
			display: none;
			border: solid #E4E7E7 2px;
			color: #303030;
			margin: 0px auto;
		}

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

		ul li {
			list-style-image: url("img/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: 80% !important;
		}

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

		.form-group button {
			margin-right: 10px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<label id="imgHelp" class="imgHelp" onclick="clickHelp()"><img src="img/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>

#Status.html

<!DOCTYPE html>
<html>
<head>
	<title>E-mail Editor</title>
</head>
<body>
	<h1>
		Your message has been successfully sent.
	</h1>
</body>
</html>

#bullet.jpg

https://res.cloudinary.com/wegoup/image/upload/v1607605501/zxc4gpngh7stc8rpjxph.jpg

#Help.jpg

https://res.cloudinary.com/wegoup/image/upload/v1607605503/ookyvesxibqmf0ezn0aq.jpg

Lê Sĩ Tuyển

2020-12-10 08:31:45

Compose E-mail messages (tuyen6tuoi.herokuapp.com)

silentvoice

2020-12-10 08:20:23

https://phamngoclong.herokuapp.com/baitaplab4/emailform/emaileditor.html

TRẦN VĂN ĐIỆP

2020-12-10 07:50:23

#index.html

<!DOCTYPE html>
<html>
<head>
	<title>Digital Email Marketing - Page</title>
	<meta charset="utf-8">

	<style type="text/css">
		body {
			background-color:  rgb(255,255,240);
		}

		.EmailEditor {
			background-color: #FFFFDD;
		}

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

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

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

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

		ul li {
			list-style-image: url("data/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: 80% !important;
		}

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

		.form-group button {
			margin-right: 10px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<label id="imgHelp" class="imgHelp" onclick="clickHelp()">HELP</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>
			<button>Send</button>
			<button>Cancel</button>
		</div>
	</div>

	<div id="help">
		<h2>E-mail Editor Help</h2>
		<ul>
			<li>noi dung 1</li>
			<li>noi dung 2</li>
			<li>noi dung 3</li>
			<li>noi dung 4</li>
			<li>noi dung 5</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>

#index.html

https://res.cloudinary.com/wegoup/image/upload/v1607586608/t7gw2dcgoerxwamfloz1.jpg

Nguyễn Hải Đăng

2020-12-09 18:43:56

https://newlevel06.herokuapp.com/Day%204/EmailEditor.html

nguyen hoang viet

2020-12-09 17:08:36

https://nguyenhoangviet.herokuapp.com/EmailEditor.html

Đặng Trần Nhật Minh

2020-11-01 11:59:10

<!DOCTYPE html>
<html>
<head>
	<title>HTML/CSS Tutorial</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="imgHelp" onclick="clickHelp()">Help</button>
<div id="main">
	<form action="status.html" method="post">
	<h2>Compose e-mail message</h2>
	<div class="row">
		<div class="col-md-4">To:</div>
		<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">From:</div>
		<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">Cc:</div>
		<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">Subject:</div>
		<div class="col-md-8"><input type="text" class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">Message:</div>
		<div class="col-md-8">
			<textarea rows="5" class="EmailEditor"></textarea>
		</div>
	</div>
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-8">
			<button>Send</button>
			<button>Cancel</button>
		</div>
	</div>
	</form>
</div>
<div id="help">
	<h2>-: E-mail Editor Help :-</h2>
	<ul>
		<li>ABC</li>
		<li>ABC</li>
		<li>ABC</li>
	</ul>
	<div class="Close" onclick="closeHellp()">Close</div>
</div>

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

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

Trần Thị Khánh Huyền

2020-10-19 03:16:35

#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: 90%;

}
.imgHelp{
	cursor: pointer;
	color: blue;
	background-color: #DDFFEE;
	right:25%;
	position: absolute;
}

	
.EmailEditor{
	background-color: #FFFFDD;
	border:solid black 1px;
}
#main{
	width: 400px;
	background-color: #DDFFEE;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0px auto;

}
#help{
	position: absolute;
	width: 500px;
	height: 420px;
	top: 10px;
	background-color: #cfc
	padding-left: 10px;
	padding-right: 10px; 
	/*display: none;*/
	border: solid #E4E7E7 2px;
	color:#303030;
}
.Close{
	text-align: right;
	color: blue;
	cursor: pointer;
}
ul{
	list-style-image: url('photos/bullet.jpg');
	list-style-type: square;
	list-style-position: inside;
}

.row{
	width: 100%;
	display: flex;
	margin-bottom: 15px; 
}
input{
	width: :90%;
}

.col-md-4{
	width:33.33%;
	float: left;
	text-align: right;
	padding-right: 10px;
}
.col-md-8{
	width: 66.67%;
	float: left;
	padding-right: 10px;
}
button{
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
}

Trần Thị Khánh Huyền

2020-10-19 03:15:32

#EmailEditor.html

<!DOCTYPE html>
<html>
<head>
	<title>Email</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="=imgHelp">Help</button>
<div id="main">
	<h2>Compose e-mail message</h2>
	<div class="row">
		<div class="col-md-4">To:</div>
		<div class="col-md-8"><input type="text" class="EmailEditor"name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">From:</div>
		<div class="col-md-8"><input type="text"class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">Cc:</div>
		<div class="col-md-8"><input type="text"class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">Subject:</div>
		<div class="col-md-8"><input type="text"class="EmailEditor" name="to"></div>
	</div>
	<div class="row">
		<div class="col-md-4">Message:</div>
		<div class="col-md-8">
			<textarea rows ="5"class="EmailEditor"></textarea></div>
	</div>
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-8">
			<button>Send</button>
		<button>Cancel</button>
	</div>
		
</div>
<div id="help">
	<h2>-:E-mail Editor Help :-</h2>
	<ul>
		<li><b>To and Cc:</b><br/>
		To and Cc boxes allow you to enter the e-mail addresses of the recepients to whom to message has to be sent.</li>
		<li><b>Subject</b></li>
		<li><b>Subject</b></li>
	</ul>
	<div class = "Close">Close</div>
</body>
</html>

Nguyễn Anh Vũ

2020-10-16 09:50:09

#E-mail Editor.html

<!DOCTYPE html>
<html>
<head>
	<title>E-mail Editor</title>
</head>
<body>
    <h1>Your message has been successfully sent</h1>
</body>
</html>

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

Vũ Trung Kiên

#EmailEditor.html

#Status.html

#bullet.jpg

#Help.jpg

Lê Sĩ Tuyển

silentvoice

TRẦN VĂN ĐIỆP

#index.html

#index.html

Nguyễn Hải Đăng

nguyen hoang viet

Đặng Trần Nhật Minh

Trần Thị Khánh Huyền

#style.css

Trần Thị Khánh Huyền

#EmailEditor.html

Nguyễn Anh Vũ

#E-mail Editor.html