By GokiSoft.com| 15:59 29/12/2021|
Học HTML5 - CSS3

[Video] Tìm hiểu về Form trong HTML - Khóa học lập trình HTML/CSS/JS


#form.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Form Tutorial</title>
</head>
<body>
<!-- Phan 1: Tim hieu cac thanh phan FORM -->
<label>Full Name:</label>
<input type="text" size="50" placeholder="Enter fullname">
<br/><br/>
<label>Email:</label>
<input type="email" size="50">
<br/><br/>
<label>Age:</label>
<input type="number" size="50">
<br/><br/>
<label>Birthday:</label>
<input type="date" size="50">
<br/><br/>
<label>Color:</label>
<input type="color" size="50">
<br/><br/>
<label>Time:</label>
<input type="time" size="50">
<br/><br/>
<label>Gioi Tinh</label>
<input type="radio" name="gender"> Nam
<input type="radio" name="gender"> Nu
<br/><br/>
<label>Gioi Tinh</label>
<input type="checkbox"> Nam
<input type="checkbox"> Nu

<br/><br/>
<label>Gioi Tinh</label>
<select>
	<option value="">-- Chon --</option>
	<option value="Nam">Nam</option>
	<option value="Nu">Nu</option>
</select>

<!-- Phan 2: Tim hieu ve validate trong FORM -->
<br/><br/>
<br/><br/>
<!-- Quy tac siny ky tu -->
<!-- [abc] -> a hoac b hoac c -->
<!-- [a-c] -> a hoac b hoac c -->
<!-- [0123456789] -> ky tu sinh ra se la 0 -> 9 -->
<!-- [0-9] -> ky tu sinh ra se la 0 -> 9 -->
<!-- [a-z] -> ky tu sinh ra se la a -> z -->
<!-- [A-Z] -> ky tu sinh ra se la A -> Z -->
<!-- [A-K] -> ky tu sinh ra se la A -> K -->
<!-- [^abc] -> sinh ra cac ky tu khong phai a hoac b hoac c -->
<!-- [^0-9] -> ky tu sinh ra se ko bao gom tu 0 -> 9 -->
<!-- Quy tac gioi han ky tu sinh ra -->
<!-- [a-z]? -> Ky tu sinh ra tu a-z: gom 0 hoac 1 ky tu -->
<!-- [a-z]* -> Ky tu sinh ra tu a-z: length >= 0 -->
<!-- [a-z]+ -> Ky tu sinh ra tu a-z: length >= 1 -->
<!-- [a-z]{5} -> Ky tu sinh ra tu a-z: length == 5 -->
<!-- [a-z]{5,} -> Ky tu sinh ra tu a-z: length >= 5 -->
<!-- [a-z]{,8} -> Ky tu sinh ra tu a-z: length <= 8 -->
<!-- [a-z]{3,8} -> Ky tu sinh ra tu a-z: 3 <= length <= 8 -->
<form method="post">
	<label>Full Name: </label>
	<input autofocus required type="text" name="fullname" placeholder="Enter fullname" minlength="6" maxlength="30" pattern="[a-zA-Z ]{6,30}">
<br/><br/>
	<label>Birthday: </label>
	<input required type="date" name="birthday" placeholder="Enter birthday">
<br/><br/>
	<label>Email: </label>
	<input required type="email" name="email" placeholder="Enter email">
<br/><br/>
	<label>Address: </label>
	<input required type="text" name="address" placeholder="Enter address">
<br/><br/>
	<button type="submit">Save</button>
	<button type="reset">Reset</button>
</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)