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

Tags:



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 [C2009I]
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 [community,C2009I]
Lê Sĩ Tuyển

2020-12-10 08:31:45

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



silentvoice [C2009I]
silentvoice

2020-12-10 08:20:23

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


TRẦN VĂN ĐIỆP [community,C1812L,C2002L,T2008A]
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 [community,C2009I]
Nguyễn Hải Đăng

2020-12-09 18:43:56

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

nguyen hoang viet [community,C2009I]
nguyen hoang viet

2020-12-09 17:08:36

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

Đặng Trần Nhật Minh [T2008A]
Đặ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 [T2008A]
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 [T2008A]
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ũ [T2008A]
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>


Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó