IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 Bài tập - Thiết kế form gửi email - 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 GokiSoft.com - 10:47 13/12/2021 7,298 Lượt Xem



Tải Resource

Bình luận



Chia sẻ từ lớp học

nguyen hoang viet [community,C2009I]

Ngày viết: 00:08 10/12/2020

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

Đặng Trần Nhật Minh [T2008A]

Ngày viết: 18:59 01/11/2020



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

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>


Tài Liệu Tham Khảo

Ứng Dụng Tiện Ích



Đã sao chép!!!