Form trong HTML(P2)

Trong phần trước chúng ta đã có cái nhìn khái quát nhất về Form trong HTML . Tiếp theo chúng ta sẽ đi sâu vào tìm hiểu thành phần <input /> của Form HTML.

1. Các kiểu của thành phần <input />

1.1 Kiểu text
Định dạng dữ liệu nhập vào trường input là dạng văn bản (text).

<form>
 Tên đăng nhập: <input type="text" name="ten" /> </form>

 1.2 Kiểu password
Xác định một trường nhập password. Các ký tự nhập vào sẽ được mã hóa thành các chấm tròn màu đen khi lap trinh web.

<form>
 Mật khẩu: <input type="password" name="mat_khau" /> </form>

1.3 Kiểu submit
Xác định một nút submit. Nút submit là nút khi ta click chọn nó thì tất cả các dữ liệu trong Form sẽ được gửi đi (theo action và method của form).

<form>
 Tên đăng nhập: <input type="text" name="ten" />  Mật khẩu: <input type="password" name="mat_khau" />  <input type="submit" value="Đăng Nhập" />
</form>

1.4 Kiểu reset
Xác định một nút. Khi ta click chọn nó thì tất cả các dữ liệu trong Form sẽ trở lại mặc định (mà không cần load lại trang web).

<form>
 Tên đăng nhập: <input type="text" name="ten" />  Mật khẩu: <input type="password" name="mat_khau" />  <input type="reset" value="Làm mới" />
</form>

1.5 Kiểu radio
Tạo ra các nút radio để người dùng lựa chọn. Và chỉ chọn duy nhất một giá trị.

<form>
 Nam: <input type="radio" name="gioi_tinh" value="nam" checked="checked" />  Nữ: <input type="radio" name="gioi_tinh" value="nu" />
</form>

* Thuộc tính name của các trường input radio này phải có cùng giá trị.

* Thuộc tính checked=”checked” dùng để lựa chọn sẵn trường giá trị chứa nó.

1.6 Kiểu checkbox
Tạo ra các nút checkbox để người dùng lựa chọn. Có thể không chọn hoặc chọn nhiều mục.

<form>
 <input type="checkbox" name="biet_danh" value="ABC">Biệt danh là ABC
 <input type="checkbox" name="biet_danh" value="123">Biệt danh là 123
</form>

 1.7 Kiểu button
Xác định một nút button

<form>
 <input type="button" value="Click Me!" />
</form>

1.8 Kiểu hidden
Xác định một trường dữ liệu không hiển thị ra màn hình. Dùng cho những trường hợp không muốn nội dung bị thay đổi.

<form>
 <input type="hidden" value="" />
</form>

1.9 Kiểu file
Xác định một trường nhập liệu là các file. Dùng trong upload file

<form>
 <input type="file" />
</form>

2. Các thuộc tính của thành phần <input />

2.1 Thuộc tính value
Thuộc tính value dùng để xác định giá trị ban đầu của trường <input />

<form>
 Tên đăng nhập: <input type="text" name="ten" value="myusername" /> </form>

2.2 Thuộc tính readonly
Thuộc tính readonly dùng để xác định trường này chỉ đọc. Hay nói cách khác là chúng ta không thay đổi được giá trị của trường đó.

<form>
 Website: <input type="text" name="ten" value="thegioiweb.net.vn" readonly /> </form>

 2.3 Thuộc tính disabled
Thuộc tính disabled dùng để xác định trường đó không thể thay đổi giá trị và quá trình xử lý form thì dữ liệu trong trường này sẽ không được gửi đi.

<form>
 Website: <input type="text" name="ten" value="thegioiweb.net.vn" disabled /> </form>

2.4 Thuộc tính size
Thuộc tính size dùng để xác định kích thước của trường nhập liệu bằng số ký tự.

<form>
 Số điện thoại: <input type="text" name="sdt" size="5" /> </form>

2.5 Thuộc tính maxlength
Thuộc tính maxlength dùng để xác định độ dài tối đa cho phép của trường nhập liệu

<form>
 Số điện thoại: <input type="text" name="sdt" maxlength="11" /> </form>

Nguồn: the gioi web

SHARE THIS