By GokiSoft.com|
10:56 13/12/2021|
Học HTML5 - CSS3
[Video] Tìm hiểu về Table & Form trong HTML/CSS - C2108G3
Phần 1:
Phần 2
#form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form in HTML/CSS</title>
</head>
<body>
<!-- B1. Tim hieu tach roi cac thanh phan -->
<p>Text</p>
<input type="text" style="width: 400px; font-size: 20px; padding: 10px;" placeholder="Enter text" value="TRAN VAN A">
<p>Email</p>
<input type="email" style="width: 400px; font-size: 20px; padding: 10px;" placeholder="Enter text">
<p>Pwd</p>
<input type="password" style="width: 400px; font-size: 20px; padding: 10px;" placeholder="Enter pwd">
<p>Number</p>
<input type="number" style="width: 400px; font-size: 20px; padding: 10px;" placeholder="Enter number">
<p>Date</p>
<input type="date" style="width: 400px; font-size: 20px; padding: 10px;" placeholder="Enter birthday">
<p>Time</p>
<input type="time" style="width: 400px; font-size: 20px; padding: 10px;" placeholder="Enter birthday">
<p>Color</p>
<input type="color">
<p>Select</p>
<select style="width: 400px; font-size: 20px; padding: 10px;">
<option value="">-- Chon --</option>
<option value="o_name">Nam</option>
<option value="o_nu">Nu</option>
<option value="o_khac">Khac</option>
</select>
<!-- Ghi nho -> value cua input/select -->
<p>Checkbox</p>
<input type="checkbox"> Nam
<input type="checkbox"> Nu
<input type="checkbox"> Khac
<p>Radio</p>
<input type="radio" name="radio_gender"> Nam
<input type="radio" name="radio_gender"> Nu
<input type="radio" name="radio_gender"> Khac
<p>DataList</p>
<input type="text" style="width: 400px; font-size: 20px; padding: 10px;" placeholder="Enter country" list="country_list">
<datalist id="country_list">
<option value="Viet Nam" />
<option value="Laos" />
<option value="Campuchia" />
<option value="Singapore" />
<option value="USA" />
<option value="Japan" />
</datalist>
<!-- Thiet ke form dang ky tai khoan nguoi dung -->
</body>
</html>#register-form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register Form in HTML</title>
<style type="text/css">
.container {
width: 600px;
margin: 0px auto;
background-color: #b6f4fa;
padding: 20px;
}
input {
width: 400px;
font-size: 20px;
padding: 10px;
}
.success {
font-size: 20px;
padding: 10px;
background-color: green;
color: white;
}
.reset {
font-size: 20px;
padding: 10px;
background-color: orange;
color: black;
}
</style>
</head>
<body>
<div class="container">
<!-- method: get (day du lieu len URL) & post (day thong tin -> hide) -->
<form method="post">
<!-- id: identity -> CMTND -->
<label style="font-size: 20px;" for="fullname">Full Name: </label>
<br>
<input required autofocus="true" type="text" placeholder="Enter fullname" id="fullname" name="fullname_name" pattern="[a-zA-Z ]{5,30}">
<br>
<label style="font-size: 20px;" for="email_id">Email: </label>
<br>
<input required type="email" placeholder="Enter email" id="email_id" name="email_name">
<br>
<label style="font-size: 20px;" for="password_id">Password: </label>
<br>
<input required type="password" placeholder="Enter Password" id="password_id" name="pwd_name" minlength="6" maxlength="20">
<br>
<label style="font-size: 20px;" for="confirm_pwd_id">Confirm Pwd: </label>
<br>
<input required type="password" placeholder="Enter Confirm Pwd" id="confirm_pwd_id" name="confirm_pwd_name" minlength="6" maxlength="20">
<br>
<label style="font-size: 20px;" for="address_id">Address: </label>
<br>
<input type="text" placeholder="Enter address" id="address_id" name="address_name">
<br/><br/>
<!-- submit, reset, label -->
<!-- type: submit, reset, button -->
<!-- <input type="submit" value="Register"> -->
<!-- button -> type -> submit, reset, button -->
<!-- button -> type default: submit -->
<button class="success" type="submit">Register</button>
<!-- <input type="reset" value="Reset"> -->
<button class="reset" type="reset">Reset</button>
<button class="reset" type="button">Button</button>
<!-- <input type="button" value="Button 1"> -->
<!-- <input type="button" value="Button 2"> -->
</form>
</div>
</body>
</html>#table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table in HTML</title>
</head>
<body>
<table border="1" cellpadding="5">
<tr>
<th>Sr.No</th>
<th>RollNo</th>
<th>Name</th>
<th>Team</th>
</tr>
<tr>
<th>1</th>
<td>1001</td>
<td>John</td>
<td>Red</td>
</tr>
<tr>
<th>2</th>
<td>1002</td>
<td>Peter</td>
<td>Blue</td>
</tr>
<tr>
<th>3</th>
<td>1003</td>
<td>Henry</td>
<td>Green</td>
</tr>
</table>
<!-- Chinh sua -> su dung trong bai toan thuc te -->
<table border="1" cellpadding="5" style="margin-top: 30px;">
<!-- header cua table -->
<thead>
<tr>
<th>Sr.No</th>
<th>RollNo</th>
<th>Name</th>
<th>Team</th>
</tr>
</thead>
<!-- Noi dung cua table -->
<tbody>
<tr>
<th>1</th>
<td>1001</td>
<td>John</td>
<td>Red</td>
</tr>
<tr>
<th>2</th>
<td>1002</td>
<td>Peter</td>
<td>Blue</td>
</tr>
<tr>
<th>3</th>
<td>1003</td>
<td>Henry</td>
<td>Green</td>
</tr>
</tbody>
</table>
<!-- CHinh sua table -->
<table border="1" cellpadding="3" style="margin-top: 30px;">
<tr>
<th rowspan="2">Station</th>
<th colspan="2">Temperature</th>
<th rowspan="2">Humidity</th>
<th rowspan="2">Weather</th>
</tr>
<tr>
<th>Max</th>
<th>Min</th>
</tr>
<tr>
<td>USA</td>
<td>24</td>
<td>19</td>
<td>60%</td>
<td>Cloudy</td>
</tr>
<tr>
<td>USA</td>
<td>24</td>
<td>19</td>
<td>60%</td>
<td>Cloudy</td>
</tr>
</table>
<!-- Next -->
<table border="1" cellpadding="5" style="margin-top: 30px;">
<tr>
<th>Sr.No</th>
<th>RollNo</th>
<th>Name</th>
<th>Team</th>
</tr>
<tr>
<th>1</th>
<td colspan="3" rowspan="2">1001</td>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>3</th>
<td>1003</td>
<td>Henry</td>
<td>Green</td>
</tr>
</table>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)