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 [Share Code] Tìm hiểu về Form & Table - Lập trình html/css/js

[Share Code] Tìm hiểu về Form & Table - Lập trình html/css/js

by GokiSoft.com - 14:57 08/12/2020 2,183 Lượt Xem

#index.html


<!DOCTYPE html>
<html>
<head>
	<title>HTML/CSS/JS tutorial</title>
	<meta charset="utf-8">

	<style type="text/css">
		input {
			font-size: 16pt;
			width: 550px;
			display: block;
		}

		form label {
			display: block;
			margin-top: 15px;
		}
	</style>
</head>
<body>
	<table border="1" cellpadding="5" cellspacing="1">
		<thead>
			<tr>
				<th>STT</th>
				<th>Fullname</th>
				<th>Email</th>
				<th>Address</th>
				<th>Gender</th>
				<th>Phone</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="3">01</td>
				<td>NGUYEN VAN A</td>
				<td colspan="3">[email protected]</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td>NGUYEN VAN B</td>
				<td colspan="3" rowspan="2" style="background-color: red">[email protected]</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td>NGUYEN VAN C</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td rowspan="3">02</td>
				<td>NGUYEN VAN D</td>
				<td>[email protected]</td>
				<td>Nam Dinh</td>
				<td>Nam</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td>NGUYEN VAN E</td>
				<td>[email protected]</td>
				<td>Nam Dinh</td>
				<td>Nam</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td>NGUYEN VAN F</td>
				<td>[email protected]</td>
				<td>Nam Dinh</td>
				<td>Nam</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td rowspan="2">03</td>
				<td>NGUYEN VAN G</td>
				<td>[email protected]</td>
				<td>Nam Dinh</td>
				<td>Nam</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td>NGUYEN VAN H</td>
				<td>[email protected]</td>
				<td>Nam Dinh</td>
				<td>Nam</td>
				<td>012332423</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>STT</th>
				<th>Fullname</th>
				<th>Email</th>
				<th>Address</th>
				<th>Gender</th>
				<th>Phone</th>
			</tr>
		</thead>
	</table>
	<!-- tim hieu tag trong form -->
	<br/><br/><br/>
	<input type="text" autofocus="true" name="fullname_text" placeholder="Enter fullname">
	<input type="email" name="email_text" placeholder="Enter email">
	<input type="number" name="age_text" step="0.01" min="1" max="100" placeholder="Enter age">
	<input type="tel" name="phone_text" placeholder="Enter phone">
	<input type="date" name="bod_text" placeholder="Enter birthday">
	<input type="time" name="time_text" placeholder="Enter time">
	<input type="color" name="color_text" placeholder="Enter color">
	<select name="gender_text">
		<option value="">-- Chon gioi tinh --</option>
		<option value="Male">Male</option>
		<option value="Female">Female</option>
	</select>
	<input type="text" name="gender_text2" placeholder="Enter gender" list="gender_list">
	<datalist id="gender_list">
		<option value="Male" />
		<option value="Female" />
	</datalist>

	<!-- Ung dung Form trong tao dang ky tai khoan -->
	<h1>Form dang ky tai khoan nguoi dung</h1>
	<form method="post">
		<label>User Name:</label>
		<input required="true" minlength="0" maxlength="30" type="text" name="username" placeholder="Enter username" pattern="[a-zA-Z0-9]{6,30}">
		<label>Fullname:</label>
		<input required="true" type="text" name="fullname" placeholder="Enter fullname">
		<label>Gender:</label>
		<select required="true">
			<option value="">-- Chon gioi tinh --</option>
			<option value="Male">Male</option>
			<option value="Female">Female</option>
		</select>
		<label>Birthday:</label>
		<input required="true" type="date" name="birthday" placeholder="Enter birthday">
		<label>Password:</label>
		<input required="true" type="password" name="password" placeholder="Enter password">
		<input type="button" value="Click Test">
		<input type="submit" value="Click Submit">
		<input type="reset" value="Click Reset">
	</form>
</body>
</html>


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!