By GokiSoft.com| 09:32 13/01/2021|
Học HTML5 - CSS3

[Share Code] Tìm hiểu về Table/Form - Lập trình HTML/CSS/JS

#vidu.html


<!DOCTYPE html>
<html>
<head>
	<title>HTML/CSS/JS tutorial</title>
	<meta charset="utf-8">
	<!-- Kien thuc: table, form, layout -->
</head>
<body>
	<!-- Table -->
	<table border="1" cellpadding="5" cellspacing="0">
		<tr>
			<td rowspan="2">A1</td>
			<td rowspan="2">A2</td> 
			<td>A3</td>
			<td colspan="3" rowspan="2">A4</td>
			<!-- <td>A5</td> -->
			<!-- <td>A6</td> -->
		</tr>
		<tr>
			<!-- <td>A1</td> -->
			<!-- <td>A2</td> -->
			<td>A3</td>
			<!-- <td colspan="3">A4</td> -->
			<!-- <td>A5</td> -->
			<!-- <td>A6</td> -->
		</tr>
		<tr>
			<td>A1</td>
			<td>A2</td>
			<td>A3</td>
			<td>A4</td>
			<td>A5</td>
			<td>A6</td>
		</tr>
		<tr>
			<td>A1</td>
			<td>A2</td>
			<td>A3</td>
			<td>A4</td>
			<td>A5</td>
			<td>A6</td>
		</tr>
		<tr>
			<td>A1</td>
			<td>A2</td>
			<td>A3</td>
			<td>A4</td>
			<td>A5</td>
			<td>A6</td>
		</tr>
	</table>

	<table border="1" cellpadding="3" cellspacing="1" style="margin-top: 30px;">
		<thead>
			<tr style="background-color: #b0f7c3;">
				<th>STT</th>
				<th>Ho Ten</th>
				<th>Gioi Tinh</th>
				<th>Dia Chi</th>
				<th>E-mail</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>01</td>
				<td>TRAN VAN A</td>
				<td>NAM</td>
				<td>HA NOI</td>
				<td>ABC@GMAIL.COM</td>
			</tr>
			<tr>
				<td>02</td>
				<td>TRAN VAN A</td>
				<td>NAM</td>
				<td>HA NOI</td>
				<td>ABC@GMAIL.COM</td>
			</tr>
			<tr>
				<td>03</td>
				<td>TRAN VAN A</td>
				<td>NAM</td>
				<td>HA NOI</td>
				<td>ABC@GMAIL.COM</td>
			</tr>
		</tbody>
	</table>

	<!-- FORM -->
	<br/>
	<!-- Step1: type -->
	<input type="text" name="name" placeholder="Enter name">
	<input type="date" name="birthday" placeholder="Enter birthday">
	<input type="number" name="age" placeholder="Enter age">
	<input type="tel" autofocus="true" name="phone" placeholder="Enter phone">
	<input type="time" name="abc" placeholder="Enter time">
	<input type="color" name="mamau">
	<select>
		<option value="">-- Chon --</option>
		<option value="Male">Nam</option>
		<option value="Female">Nu</option>
		<option value="Other">Khac</option>
	</select>

	<input type="text" name="s" list="list_abc">
	<datalist id="list_abc">
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="Nam" />
		<option value="1" />
		<option value="1" />
		<option value="Nu" />
		<option value="1" />
		<option value="1" />
		<option value="Viet Nam" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
		<option value="1" />
	</datalist>
	<input type="button" name="submit" value="Submit Data">
	<button>ABC</button>

	<!-- Phan 2: FORM -> form -->
	<form method="post">
		<p>Nhap Ten:</p>
		<input required="true" minlength="3" maxlength="50" pattern="[a-zA-Z0-9]{3,50}" type="text" name="name" placeholder="Enter name" title="Vui long nhap lai">
		<p>Mat Khau:</p>
		<input required="true" minlength="3" maxlength="20" type="password" name="pwd" placeholder="Enter password">
		<p>
			<button type="submit">Submit</button>
		</p>
	</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)