🔢6-Chèn và định dạng form

Form là gì?

Ví dụ về Form

Form đăng nhập facebook

Form tra cứu thời khoá biểu

Form là biểu mẫu trên trang HTML được dùng để thu thập thông tin đầu vào của người dùng. Đầu vào này thường được gửi đến phía máy chủ để xử lý.

Cấu trúc tạo ra form

<form name="ten-form" action="duong-dan" method="POST/GET/...">  
    <!-- code -->  
</form>  

Trong đó:

• form để bắt đầu định nghĩa 1 form

• name: đặt tên cho form

• action: đường dẫn để nhận dữ liệu khi form được submit

• method: là phương thức gửi dữ liệu (ví dụ: POST/GET…)

Các thẻ thành phần cơ bản trong form

Text input

• Mục đích: Tạo ra ô input nhập dữ liệu dạng ký tự, số với độ dài ngắn.

• Cấu trúc:

<form action="" method="GET">  
    Họ và tên: <input type="text" name="ho_ten" size="5" maxlength="30" placeholder=”Nhập vào họ tên” value="Vũ Quang Dương" />  
</form>  

Kết quả hiển thị

• Một số thuộc tính:

  • Name = “ho_ten” tên của ô input, dùng để lấy giá trị người dùng nhập vào.

  • Size = “5” độ dài của ô input được tính bằng lượng ký tự. Thuộc tính này ít được sử dụng thay vào đó chúng ta sử dụng css để style cho input.

  • Maxlength = “15” độ dài tối đa của chuỗi nhập vào. Người dùng không thể nhập quá số ký tự cho phép.

  • Value: Giá trị mặc định cho ô input. Nếu có giá trị này, khi trang HTML được tải, giá trị sẽ xuất hiện trong ô input.

  • Placeholder=”Nhập vào họ tên” là lời gợi ý cho người dùng biết nhập thông tin nào vào ô input. Giá trị này sẽ tự ẩn khi người dùng click vào ô input và nhập dữ liệu.

Password input

• Mục đích: Tạo ra ô input nhập dữ liệu dạng ký tự, số với độ dài ngắn nhưng dữ liệu được hiển thị dạng dấu * hoặc chấm tròn. Thường được sử dụng khi nhập mật khẩu hoặc mã bảo mật để tránh bị lộ dữ liệu.

• Cấu trúc:

<form action="" method="GET">  
    Mật khẩu: <input type="text" name="mat_khau" size="50" maxlength="30" placeholder=”Nhập vào mật khẩu” value="123456@" />  
</form>  

Kết quả hiển thị

• Một số thuộc tính:

  • Name = “mat_khau” tên của ô input, dùng để lấy giá trị người dùng nhập vào.

  • Size = “30” độ dài của ô input được tính bằng lượng ký tự. Thuộc tính này ít được sử dụng thay vào đó chúng ta sử dụng css để style cho input.

  • Maxlength = “15” độ dài tối đa của chuỗi nhập vào. Người dùng không thể nhập quá số ký tự cho phép.

  • Value=”123456@”: Giá trị mặc định cho ô input. Nếu có giá trị này, khi trang HTML được tải, giá trị sẽ xuất hiện trong ô input.

  • Placeholder=”Nhập vào mật khẩu” là lời gợi ý cho người dùng biết nhập thông tin nào vào ô input. Giá trị này sẽ tự ẩn khi người dùng click vào ô input và nhập dữ liệu.

Text Area

• Mục đích: Tạo ra ô input nhập dữ liệu dạng ký tự, số với với số lượng ký tự dài và nhiều dòng. Text area có thẻ đóng và thẻ mở.

• Cấu trúc:

<form action="" method="GET">  
    <textarea name="gioi_thieu" cols="20" rows="4" placeholder="Bạn hãy giới thiệu qua về bản thân mình"> 
</form>  

Kết quả hiển thị

• Một số thuộc tính:

  • Name = “mat_khau” tên của ô input, dùng để lấy giá trị người dùng nhập vào.

  • Cols = “20” độ dài của ô input được tính bằng lượng ký tự. Thuộc tính này ít được sử dụng thay vào đó chúng ta sử dụng css để style cho input.

  • rows = “4” số lượng dòng hiển thị trong text-area (chính là chiều cao của ô input).

  • Placeholder=”Bạn hãy giới thiệu qua về bản thân mình” là lời gợi ý cho người dùng biết nhập thông tin nào vào ô input. Giá trị này sẽ tự ẩn khi người dùng click vào ô input và nhập dữ liệu.

Radio Button

• Mục đích: Thông thường được sử dụng để nhập dữ liệu theo phương án chọn 1 trong một số kết quả. Số kết quả ít (thường là dưới 5 kết quả).

Ví dụ: Lựa chọn đáp án chắc nghiệm (1 trong 4 đáp án)

• Cấu trúc:

Đáp án đúng:   
        <input type="radio" name="ket_qua" value="a" checked="checked" /> Đáp án A  
        <input type="radio" name="ket_qua" value="b" /> Đáp án B  
        <input type="radio" name="ket_qua" value="c" /> Đáp án C 

Kết quả hiển thị

• Một số thuộc tính:

  • Name = “ket_qua” tên của ô input, dùng để lấy giá trị người dùng nhập vào. Chú ý, để lựa chọn 1 trong nhiều đáp án thì bắt buộc các đáp án trong cùng một nhóm phải cùng tên (name giống nhau).

  • check = “checked” mặc định lựa chọn cho đáp án.

  • Value=”a” Giá trị mà server sẽ nhận được khi submit form.

Checkbox

• Mục đích: Thông thường được sử dụng để nhập dữ liệu theo phương án chọn nhiều đáp án trong danh sách kết quả.

Ví dụ: Lựa chọn sở thích cá nhân…

• Cấu trúc:

Sở thích của bạn:   
  <input type="checkbox" name="so_thich" value="nghe_nhac" checked="checked" /> Nghe nhạc  
  <input type="checkbox" name="so_thich " value="xem_phim" /> Xem phim  
  <input type="checkbox" name="so_thich " value="doc_sach" /> Đọc sách  

Kết quả hiển thị

• Một số thuộc tính:

  • Name = “so_thich” tên của ô input, dùng để lấy giá trị người dùng nhập vào. Chú ý, để lựa chọn 1 trong nhiều đáp án thì bắt buộc các đáp án trong cùng một nhóm phải cùng tên (name giống nhau).

  • check = “checked” mặc định lựa chọn cho đáp án.

  • Value=”nghe_nhac” Giá trị mà server sẽ nhận được khi submit form.

Dropdown List Box

• Mục đích: Thông thường được sử dụng để nhập dữ liệu theo phương án chọn 1 trong nhiều kết quả nhưng có số lượng lựa chọn nhiều (Thường là trên 5 kết quả).

Ví dụ: chọn tỉnh thành phố sinh sống trong 64 tỉnh thành. Lựa chọn 1 trong 64 tỉnh thành phố

• Cấu trúc:

Chọn nơi bạn đang sống   
        <select name="thanh_pho">  
          <option value="">--Chọn thành phố---</option>  
          <option value="hanoi" selected>Hà Nội</option>  
          <option value="hochiminh">TP Hồ Chí Minh</option>  
        </select> 

Kết quả hiển thị

• Thẻ select để định nghĩa một dropdownlist, các lựa chọn được dịnh nghĩa bởi thẻ option.

• Một số thuộc tính:

  • Name = “thanh_pho” là thuộc tính của select, dùng để lấy dữ liệu khi gửi lên server.

  • selected mặc định lựa chọn một option.

  • Value=”hanoi” Giá trị mà server sẽ nhận được khi submit form.

Multiple Select Box

• Mục đích: Thông thường được sử dụng để nhập dữ liệu theo phương án chọn nhiều phương án trong nhiều kết quả nhưng có số lượng lựa chọn nhiều (Thường là trên 5 kết quả)

Ví dụ: Lựa chọn các thành phố nơi bạn đã từng sinh sống.

• Cấu trúc:

Chọn nơi bạn đã từng sinh sống <br>  
        <select name="thanh_pho" size="4" multiple="multiple">  
            <option value="hanoi" selected="selected"> Hà Nội</option>  
            <option value="hochiminh">TP Hồ Chí Minh</option>  
            <option value="danang" selected="selected">Đà Nẵng</option>  
            <option value="dalat">Đà Lạt</option>  
            <option value="sapa">Sapa</option>  
        </select> 

Kết quả hiển thị

• Thẻ select với thuộc tính multiple="multiple" để định nghĩa một multiple select box, các lựa chọn được dịnh nghĩa bởi thẻ option.

• Một số thuộc tính:

  • Name = “thanh_pho” tên của ô input, dùng để lấy giá trị người dùng nhập vào.

  • Size = “4” số lượng dòng hiển thị trên multile select box.

  • Selected = “selected” mặc định lựa chọn cho đáp án.

  • Value=”hanoi” Giá trị mà server sẽ nhận được khi submit form.

File input

• Mục đích: Dùng để cho người dùng upload file lên servẻ.

Ví dụ: Upload ảnh đại diện, file đính kèm trong email…

• Cấu trúc:

File đính kèm  
        <input type="file" name="avatar" accept="image/*"/> <br/> 

Kết quả hiển thị

• Một số thuộc tính:

  • Name = “avatar” tên của ô input, dùng để lấy giá trị người dùng nhập vào.

  • accept = “image/*” các định dạng file được cho phép chọn khi upload.

Submit Button

• Mục đích: Tạo ra 1 button để khi người dùng click vào button đó thì sẽ gửi dữ liệu lên server.

• Cấu trúc:

<p>Nhận bài viết mới nhất</p>  
    <input type="text" name="email" />  
    <input type="submit" name="dangky" value="Đăng ký" /> 

Kết quả hiển thị

• Một số thuộc tính:

  • Name = “ket_qua” tên của button.

  • Value= “Đăng ký” text hiển thị trong button.

Hidden Controls

• Mục đích: Sử dụng để gửi các dữ liệu mặc định lên server mà user không cần nhập vào và cũng không cần hiển thị ra cho user nhìn thấy.

• Cấu trúc:

<input type="hidden" name="an_so" value="demo" />  

• Một số thuộc tính:

  • Name = “ket_qua” tên của ô input, dùng để lấy giá trị người dùng nhập vào.

  • Value=”demo” Giá trị mà server sẽ nhận được khi submit form.

Các thẻ form và thuộc tính trong HTML5

Form validation

- Sử dụng để validate dữ liệu do người dùng nhập vào.

Required fields

- Chúng ta có thể thêm thuộc tính required vào mỗi input form control để yêu cầu người dùng bắt buộc phải nhập dữ liệu.

- Cú pháp:

<input type="text" name="name" required/> <br/>  

Yêu cầu nhập thông tin khi sử dụng thuộc tính required

Validating data

• Chúng ta có thể sử dụng pattern để yêu cầu dữ liệu nhập vào theo đúng định dạng mong muốn.

• Ví dụ: yêu cầu nhập vào tên chỉ chứa các ký tự từ A-Z hoặc a-z và khoảng cách.

<input type="text" name="name" required pattern="[A-Za-z\s]+"/> <br/>  

Một số input đặc biệt trong HTML

Date input

• Để nhập dữ liệu ngày tháng năm.

• Cú pháp:

<input type="date" name="date_of_birth" id="date_of_birth"/> <br/>  

Hộp thoại chọn ngày tháng năm khi sử dụng input date

Email input

• Để nhập dữ liệu dạng email, nếu dữ liệu nhập vào không đúng sẽ bị cảnh báo.

• Cú pháp:

<input type="email" name="email" id="email" placeholder="Email"/> <br/>

Cảnh báo khi nhập email không đúng định dạng

URL input

• Để nhập dạng url, nếu không đúng định dạng sẽ bị cảnh báo.

• Cú pháp:

<input type="url" name="website" id="website"/> <br/> 

Cảnh báo khi nhập url không đúng định dạng

Tóm tắt nội dung bài học:

Qua buổi học chúng ta đã được tìm hiểu một số nội dung sau:

• Cách tạo ra một biểu mẫu (form) để thu thập dữ liệu người dùng.

• Một số thẻ form trong HTML5.