By GokiSoft.com| 18:18 20/10/2023|
Học HTML5 - CSS3

[Share Code] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS - C2307L

Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

#status.html

<!DOCTYPE html>
<html>
<head>
	<title>Status page</title>
	<meta charset="utf-8">
</head>
<body>
	<h1 style="text-align: center;">Welcome to Status page</h1>
</body>
</html>

#style.css

body {
	background-color: rgb(255,255,240);
}

.EmailEditor {
	background-color: #FFFFDD;
	border: solid 1px grey;
	width: 280px;
}

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

.group {
	/*width: 100%;
	display: flex;*/
	margin-bottom: 8px;
}

.group label {
	width: 80px;
	float: left;
	text-align: right;
	padding-right: 6px;
}

#help {
	position: absolute;
	width: 500px;
	height: 420px;
	top: 10px;
	display: none;
	border: solid 2px #E4E7E7;
	color: #303030;
}

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

ul {
	/*list-style-image: url('sqpurple.gif');*/
	list-style-position: inside;
	list-style-type: circle;
}

#vidu.html

<!DOCTYPE html>
<html>
<head>
	<title>Form tutorial</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
	<form action="status.html" method="get">
		<h2>Compose e-mail message.</h2>
		<div class="group">
			<label>To: </label>
			<input required type="email" name="to" class="EmailEditor">
		</div>
		<div class="group">
			<label>From: </label>
			<input required type="email" name="from" class="EmailEditor">
		</div>
		<div class="group">
			<label>Cc: </label>
			<input required type="email" name="cc" class="EmailEditor">
		</div>
		<div class="group">
			<label>Subject: </label>
			<input required type="text" name="sbuject" class="EmailEditor" pattern="[a-zA-Z0-9 ]{6,200}">
			<!-- [a-z]*: sinh ra >= 0 ky tu -->
			<!-- +: sinh ra >= 1 -->
			<!-- ?: sinh ra 0 | 1 -->
		</div>
		<div class="group">
			<label>Message: </label>
			<textarea rows="5" class="EmailEditor"></textarea>
		</div>
		<div class="group">
			<label>&nbsp;</label>
			<button type="submit">Send</button>
			<button type="reset">Cancel</button>
		</div>
	</form>
</div>
</body>
</html>
Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

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

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