Day 4 - 25/8

1. Thuộc tính của Form

• action : định nghĩa hành động khi gửi form đi, thường form sẽ được gửi tới 1 file trên server

• target : nơi hiển thị phản hồi sau khi gửi form đi

• method : chọn phương thức HTTP khi gửi form đi. method="get" Dữ liệu gửi đi có dạng như biến URL (dữ liệu được xử lý và đồng thời xuất hiện ở phía cuối URL); chỉ.dùng với thông tin ít bảo mật; bị giới hạn chiều dài bởi chiều dài của URL.method="post" dữ liệu chỉ gửi đi mà ko hiện cùng URL; dùng với các thông tin yêu cầu bảo mật; không giới hạn độ dài; form gửi đi với post không thể bị đánh dấu ?

• autocomplete : trình duyệt tự động điền thông tin dựa trên thông tin lần trước người dùng nhập vào

• novalidate : thông tin gửi đi ko cần xác nhận tính hợp lệ

1. Các Element của form

• <input>

• <label for="something"> choose sth </label>

• <option value="something" selected> name </option> : option định nghĩa cho 1 lựa chọn; lựa chọn đầu tiên trong danh sách cuộn xuống được chọn để hiển thị mặc định; selected sẽ cho option chứa nó hiển thị mặc định

• <select id name size="n" multiple> : size chọn n option đầu để hiển thị mặc định; multiple để có thể chọn nhiều option

• <textarea/> : để định nghĩa 1 ô text nhiều dòng nhiều cột; có thể thay đổi đc trong cả html và css

• <button type="button" onclick=alert"hello" >click here </button> : onclick thực hiện lệnh khi ấn nút; alert hiện thông báo chứa nội dung, nếu kèm theo link sẽ hiện tbao rồi chuyển đến link

• <fieldset/> : đóng khung nội dung chứa trong nó

• <legend/> : đặt tiêu đề cho fieldset

• <datalist/> : danh sách các option; khi cần có thể gọi tới cá danh sách thay vì từng option riêng lẻ

• <output/> : hiện kết quả của 1 phép tính

1. Input type

• text : hiện 1 dòng để nhập text input

• password : hiện 1 dòng nhập pass, ký tự đổi thành chấm tròn hoặc hoa thị

• submit

• reset : tạo nút reset form về trạng thái mặc định

• radio : chọn 1 trong các input choices

• checkbox : ko chọn hoặc chọn nhiều hơn 1

• button

• color

• date : hiện thanh công cụ chọn ngày tháng năm; có thể set max min để giới hạn

• datetime-local : chọn ngày tháng năm và giờ phút

• email : ô nhập dữ liệu loại địa chỉ email, tùy trình duyệt mà địa chỉ sẽ tự động được kiểm tra tính hợp lý khi submit

• image : thiết lập 1 ảnh trở thành nút submit

• file : tạo 1 nút để duyệt file từ máy tính và lựa chọn file để submit

• hidden : ô dữ liệu ko hiển thị với người dùng nhưng sẽ được gửi đi khi submit; dữ liệu này có thể được chỉnh sửa bởi các công cụ lập trình

• month : chọn tháng và năm

• number : chọn 1 số nguyên bất kỳ; có thể giới hạn khoảng giá trị bằng min max

• range : chọn 1 số trong khoảng giá trị thông qua thanh trượt, không biết giá trị chính xác của số đó trước khi submit; có thể chỉnh giới hạn qua min max step; mặc định là min=0 max=100 step=1

• search : tạo 1 ô tìm kiếm; hhoạt động giống ô text

• tel : ô nhập dữ liệu cần là dạng số điện thoại; placeholder ="" hiển thị số điện thoại ví dụ ở dạng chìm; pattern="" dạng nhập vào của số điện thoại phải giống với định dạng trong pattern, cả dấu '-'

• time : chọn thời gian

• url : nhập dữ liệu dạng url; có thể yêu cầu xác minh tính hợp lệ khi submit

• week : chọn tuần thứ bao nhiêu + năm

1. Input attribute

• value="": giá trị hiển thị mặc định của 1 input

• readonly: 1 input chỉ có thể được đọc mà không thể thao tác nhưng vẫn có thể copy, highlight; giá trị vẫn được gửi đi khi submit

• disabled: 1 disabled input không thể sử dụng, không thể thao tác; giá trị của nó cũng ko được gửi đi khi submit

• size: chiều rộng của 1 ô text tính theo đơn vị là số ký tự

• maxlength: số lượng ký tự tối đa được nhập

• multiple : cho phép nhập vào nhiều hơn 1 giá trị; chỉ hoạt động với file, url

• pattern: quy định kiểu ký tự và số lượng ký tự thuộc kiểu ký tự đó

• required: input bắt buộc phải nhập

• autofocus: bôi đậm input cần chú ý mỗi khi load trang web

• autocomplete="": hiện các đề xuất hoàn thiện nhập input

1. Input Form attribute

• có thể ghi input ngoài form mà vẫn thuộc sở hữu của form, với điều kiện khai báo cho input trỏ tới id của form

<form id="examp">

<input form="examp">

• formaction: chỉ tới link của file sẽ xử lý dữ liệu khi được submit formaction được khai báo trong thẻ <input type="submit">, sau action được khai báo trong thẻ <form> và sẽ đè lên thông ttin của action.

• formenctype: quy định cách mã hóa dữ liệu khi submit ; chỉ dùng với method="post"

• formtarget: cách mở trang web khi nhận được phản hồi; sẽ đè lên thông tin của target khai báo trong <form>; khai báo trong <input type="submit">

• formnovalidate: không cần kiểm chứng tính hợp lệ ới dữ liệu được submit; khai báo trong <input type="submit">; sẽ ghi đè lên novalidate khai báo trong <form>

Tạo 1 trang web với Form và Input: https://github.com/dtian23/HTML.git