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)
