> For the complete documentation index, see [llms.txt](https://dtian.gitbook.io/daily-report-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dtian.gitbook.io/daily-report-1/day-4-25-8.md).

# 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; <mark style="color:red;">form gửi đi với post không thể bị đánh dấu ?</mark>
* `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&#x20;
* `novalidate` : thông tin gửi đi ko cần xác nhận tính hợp lệ&#x20;

2. 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&#x20;
* \<textarea/> : để định nghĩa 1 ô text nhiều dòng nhiều cột; có thể thay đổi đc trong cả html và css&#x20;
* \<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&#x20;
* \<fieldset/> : đóng khung nội dung chứa trong nó&#x20;
* \<legend/> : đặt tiêu đề cho fieldset&#x20;
* \<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ẻ&#x20;
* \<output/> : hiện kết quả của 1 phép tính&#x20;

3. Input type&#x20;

* text : hiện 1 dòng để nhập text input&#x20;
* password : hiện 1 dòng nhập pass, ký tự đổi thành chấm tròn hoặc hoa thị&#x20;
* submit&#x20;
* reset : tạo nút reset form về trạng thái mặc định&#x20;
* radio : chọn 1 trong các input choices
* checkbox : ko chọn hoặc chọn nhiều hơn 1&#x20;
* button&#x20;
* 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&#x20;
* datetime-local : chọn ngày tháng năm và giờ phút&#x20;
* 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&#x20;
* 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&#x20;
* 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&#x20;
* 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&#x20;
* 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&#x20;
* 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&#x20;
* week : chọn tuần thứ bao nhiêu + năm&#x20;

4. Input attribute

* value="": giá trị hiển thị mặc định của 1 input&#x20;
* 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&#x20;
* 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&#x20;
* size: chiều rộng của 1 ô text tính theo đơn vị là số ký tự&#x20;
* maxlength: số lượng ký tự tối đa được nhập&#x20;
* multiple : cho phép nhập vào nhiều hơn 1 giá trị; chỉ hoạt động với file, url&#x20;
* 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&#x20;
* autofocus: bôi đậm input cần chú ý mỗi khi load trang web&#x20;
* autocomplete="": hiện các đề xuất hoàn thiện nhập input&#x20;

5. Input Form attribute&#x20;

* 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&#x20;

`<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.&#x20;
* `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>`&#x20;

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