IMG-LOGO
Trang Chủ Chủ Đề Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS
× 1) Examination & Test + Ôn tập HTML/CSS/JS - Lập Trình HTML5/CSS/JS 2) Tìm hiểu hiển thị TEXT trong HTML5 và CSS - Phần basic 3) Tìm hiểu hiển thị TEXT trong HTML5 và CSS - Phần advanced 4) Thiết kế trang web Vincent State School - Lập trình html5 / css / javascript 5) Thiết kế website quản lý showroom - galaxy - Lập trình HTML5/CSS/Javascript 6) Thiết kế website sử dụng IFrame - phân chia layout - Lập trình HTML5 CSS Javascript 7) Thiết kế calendar page bằng HTML5/CSS - Tạo website calendar HTML5/CSS 8) Thiết kế Form đăng ký tài khoản bằng HTML5/CSS - Thiết kế registation form HTML5/CSS 9) Bài tập - Tạo website giới thiệu thông tin cá nhân - profile page - Lập trình HTML/CSS/JS 10. Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS 11) Bài tập ôn luyện Table - Lập trình HTML/CSS/JS 12) Bài tập ôn luyện IFrame - 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 TRẦN VĂN ĐIỆP - 16:18 12/10/2020 1,349 Lượt Xem



Tải Resource

Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Trần Thị Khánh Huyền [T2008A]

Ngày viết: 10:16 19/10/2020


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

Ngày viết: 10:15 19/10/2020


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

Ngày viết: 16:50 16/10/2020


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


Nguyễn Anh Vũ [T2008A]

Ngày viết: 16:49 16/10/2020


#compose e-mail messaage.html


<!DOCTYPE html>
<html>
<head>
	<title>E-mail Editor</title>
	<link rel="stylesheet" type="text/css" href="style4.css">
</head>
<body>
 <form id="main" action="#">
   <h1>Compose e-mail message</h1><br>
   <table>
   	<tr>
   		<td ><label for="to">To:</label></td>
   		<td><input type="text" name="to" value="" style="width:400px"/></td>
    </tr>
    <tr>
   		<td ><label for="form">From:</label></td>
   		<td><input type="text" name="form" value="" style="width:400px"/></td>
    </tr>
    <tr>
   		<td ><label for="Cc">Cc:</label></td>
   		<td><input type="text" name="Cc" value="" style="width:400px"/></td>
    </tr>
    <tr>
   		<td ><label for="subject">Subject:</label></td>
   		<td><input type="text" name="Subject" value="" style="width:400px"/></td>
    </tr>
    <tr>
   		<td ><label for="message">Message:</label></td>
   		<td><textarea rows="10" cols="55" name="comment" form="usrform" class="scroll" > Nhập văn bản...</textarea></td>
    </tr>
   </table> 
  <a href="status.html"> <input type="submit" name=""></a>
    <input type="submit" id="register_0" value="Canner"/>
 </form>    
<div class="dropdown">
  <button id="myBtn" class="dropbtn"><img src="help.jpg"></button>
  <div id="myDropdown" class="dropdown-content">
    <h2 style="margin-left: 10px"> -: E-mail Editor Help:-</h2>
    <div style="margin-left: 60px;">
    <b><img src="bullet.jpg"> 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 be 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.<br>
    <b><img src="bullet.jpg"> Subject:</b><br>
    The <b>Subject</b> box allows you to enter meaningful summary of the message. <br>
    <b><img src="bullet.jpg"> Message:</b><br>
    The <b>Message</b> TextArea allow you to enter the text of your message.
</div>
<a href="" style="float: right;color: blue;cursor: hand" >close</a>
  </div>
</div>
<script>
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
</script>

</body>
</html>


Nguyễn Anh Vũ [T2008A]

Ngày viết: 16:48 16/10/2020


#compose e-mail messaage.html


<!DOCTYPE html>
<html>
<head>
	<title>E-mail Editor</title>
	<link rel="stylesheet" type="text/css" href="style4.css">
</head>
<body>
 <form id="main" action="#">
   <h1>Compose e-mail message</h1><br>
   <table>
   	<tr>
   		<td ><label for="to">To:</label></td>
   		<td><input type="text" name="to" value="" style="width:400px"/></td>
    </tr>
    <tr>
   		<td ><label for="form">From:</label></td>
   		<td><input type="text" name="form" value="" style="width:400px"/></td>
    </tr>
    <tr>
   		<td ><label for="Cc">Cc:</label></td>
   		<td><input type="text" name="Cc" value="" style="width:400px"/></td>
    </tr>
    <tr>
   		<td ><label for="subject">Subject:</label></td>
   		<td><input type="text" name="Subject" value="" style="width:400px"/></td>
    </tr>
    <tr>
   		<td ><label for="message">Message:</label></td>
   		<td><textarea rows="10" cols="55" name="comment" form="usrform" class="scroll" > Nhập văn bản...</textarea></td>
    </tr>
   </table> 
  <a href="status.html"> <input type="submit" name=""></a>
    <input type="submit" id="register_0" value="Canner"/>
 </form>    
<div class="dropdown">
  <button id="myBtn" class="dropbtn"><img src="help.jpg"></button>
  <div id="myDropdown" class="dropdown-content">
    <h2 style="margin-left: 10px"> -: E-mail Editor Help:-</h2>
    <div style="margin-left: 60px;">
    <b><img src="bullet.jpg"> 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 be 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.<br>
    <b><img src="bullet.jpg"> Subject:</b><br>
    The <b>Subject</b> box allows you to enter meaningful summary of the message. <br>
    <b><img src="bullet.jpg"> Message:</b><br>
    The <b>Message</b> TextArea allow you to enter the text of your message.
</div>
<a href="" style="float: right;color: blue;cursor: hand" >close</a>
  </div>
</div>
<script>
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
</script>

</body>
</html>


Danh Sách Bài Học

Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!