Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS
https://res.cloudinary.com/wegoup/image/upload/v1602660803/cqxxhrtrmtpfkmgcqh7w.jpg
https://res.cloudinary.com/wegoup/image/upload/v1602660804/kcckpj0klzlwqtlqwmft.jpg
<!DOCTYPE html>
<html>
<head>
<title>Status page</title>
</head>
<body>
<h1>Status page</h1>
</body>
</html>
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 grey 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;
margin: 0px auto;
}
.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;
}
<!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>
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://ziczacvn.com
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website