By GokiSoft.com| 14:57 08/12/2020|
Học HTML5 - CSS3

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

#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">nguyenvana@gmail.com</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td>NGUYEN VAN B</td>
				<td colspan="3" rowspan="2" style="background-color: red">nguyenvana@gmail.com</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>nguyenvana@gmail.com</td>
				<td>Nam Dinh</td>
				<td>Nam</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td>NGUYEN VAN E</td>
				<td>nguyenvana@gmail.com</td>
				<td>Nam Dinh</td>
				<td>Nam</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td>NGUYEN VAN F</td>
				<td>nguyenvana@gmail.com</td>
				<td>Nam Dinh</td>
				<td>Nam</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td rowspan="2">03</td>
				<td>NGUYEN VAN G</td>
				<td>nguyenvana@gmail.com</td>
				<td>Nam Dinh</td>
				<td>Nam</td>
				<td>012332423</td>
			</tr>
			<tr>
				<td>NGUYEN VAN H</td>
				<td>nguyenvana@gmail.com</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>


Tags:

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

5

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