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)
