Hướng dẫn html form advanced - html form nâng cao

Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". [Ví dụ: thiệp tân linh mục giuseart]. Tìm kiếm ngay Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". [Ví dụ: thiệp tân linh mục giuseart]. Tìm kiếm ngay

Chào mừng các bạn quay trở lại với loạt bài học HTML cơ bản tại Giuseart.com. Trong bài học này, chúng ta sẽ cùng nhau tìm hiểu cách tạo form trong HTML cũng như cách sử dụng các thẻ tạo form hiệu quả nhất trong lập trình website.

Mẫu Form có vai trò gì?

Trong quá trình thiết kế và quản trị website, chắc chắn bạn sẽ cần thu thập một số thông tin của người dùng như: họ tên, số điện thoại, địa chỉ email, thẻ tín dụng…

Các mẫu form sẽ nhận dữ liệu từ người dùng internet, sau đó sẽ gửi đến các ứng dụng back-end như CGI, APS-Script hoặc PHP Script [hiểu đơn giản là gửi dữ liệu về server để xử lí rồi có tác vụ phản hồi].

Bên trong thẻ form, có nhiều phần tử form như trường text, các trường textarea, menu, checkbox,…

Cấu trúc của thẻ Form

Thẻ được dùng để tạo một mẫu Form trong HTML và có cấu trúc sau:

cácphầntửfont,chẳnghạnnhưinput,textarea...cácphầntửfont,chẳnghạn nhưinput,textarea...

    cácphầntửfont,chẳnghạnnhưinput,textarea...

Một số loại form thường dùng trong HTML

Trong lập trình HTML và trong công việc thường ngày, chúng ta dễ dàng bắt gặp các loại form sau:

Các loại form nhập liệu

Nói đến form nhập liệu bạn sẽ hiểu ngay loại form này dùng để thu thập thông tin người dùng thông qua việc trực tiếp nhập thông tin vào khoảng trống cho sẵn. Các trường hợp người dùng nhập thông tin vào website có thể kể đến như điền Họ và tên, mật khẩu hoặc viết đoạn bình luận,… Do đó, chúng ta sẽ tìm hiểu 3 loại form nhập liệu sau: Text input một dòng đơn: được sử dụng cho các mục đích thu thập thông tin chỉ một dòng của dữ liệu đầu vào của người dùng như các hộp tìm kiếm, các khung nhập username,… Text input được tạo ra bởi thẻ .

+ Text input một dòng đơn: được sử dụng cho các mục đích thu thập thông tin chỉ một dòng của dữ liệu đầu vào của người dùng như các hộp tìm kiếm, các khung nhập username,… Text input được tạo ra bởi thẻ .Password input: đây cũng là kiểu nhập liệu một dòng đơn nhưng các ký tự của nó được giấu đi ngay khi người dùng nhập liệu. Loại form này sử dụng cho các khung điền mật khẩu đăng nhập.

+ Password input: đây cũng là kiểu nhập liệu một dòng đơn nhưng các ký tự của nó được giấu đi ngay khi người dùng nhập liệu. Loại form này sử dụng cho các khung điền mật khẩu đăng nhập.Input nhiều dòng: được sử dụng cho các mục đích nhập liệu thông tin dài hơn một dòng, thường là comment, thông điệp hoặc nhiều mục đích khác,… Kiểu nhập liệu nhiều dòng được tạo ra bởi thẻ .

+ Input nhiều dòng: được sử dụng cho các mục đích nhập liệu thông tin dài hơn một dòng, thường là comment, thông điệp hoặc nhiều mục đích khác,… Kiểu nhập liệu nhiều dòng được tạo ra bởi thẻ .

Text input một dòng đơn với thuộc tính style là “text” theo cú pháp như ví dụ sau:

cácphầntửfont,chẳnghạnnhưinput,textarea...title>Vi du Text Input trong HTML-Giuseart.com     cácphầntửfont,chẳnghạnnhưinput,textarea...ọvàtên:       cácphầntửfont,chẳnghạnnhưinput,textarea...êquán:

    cácphầntửfont,chẳnghạnnhưinput,textarea...

Một số loại form thường dùng trong HTML

Trong lập trình HTML và trong công việc thường ngày, chúng ta dễ dàng bắt gặp các loại form sau:

Các loại form nhập liệuType: Xác định kiểu dữ liệu đầu vào. Để text nếu muốn nhập chữ, để number nếu muốn nhập số.

Nói đến form nhập liệu bạn sẽ hiểu ngay loại form này dùng để thu thập thông tin người dùng thông qua việc trực tiếp nhập thông tin vào khoảng trống cho sẵn. Các trường hợp người dùng nhập thông tin vào website có thể kể đến như điền Họ và tên, mật khẩu hoặc viết đoạn bình luận,… Do đó, chúng ta sẽ tìm hiểu 3 loại form nhập liệu sau:Name: Xác định tên cho trường để gửi tới Server để xác định và nhận giá trị của nó.

+ Text input một dòng đơn: được sử dụng cho các mục đích thu thập thông tin chỉ một dòng của dữ liệu đầu vào của người dùng như các hộp tìm kiếm, các khung nhập username,… Text input được tạo ra bởi thẻ .Value: Xác định giá trị dữ liệu đầu vào lúc ban đầu của form.

+ Password input: đây cũng là kiểu nhập liệu một dòng đơn nhưng các ký tự của nó được giấu đi ngay khi người dùng nhập liệu. Loại form này sử dụng cho các khung điền mật khẩu đăng nhập.Size: Quy định độ rộng của khung nhập liệu.

+ Input nhiều dòng: được sử dụng cho các mục đích nhập liệu thông tin dài hơn một dòng, thường là comment, thông điệp hoặc nhiều mục đích khác,… Kiểu nhập liệu nhiều dòng được tạo ra bởi thẻ .Maxlength: Giới hạn số ký tự tối đa mà người dùng được phép nhập vào text input.

Text input một dòng đơn

Để tạo form nhập liệu một dòng, chúng ta cần dùng thẻ với thuộc tính style là “text” theo cú pháp như ví dụ sau: và thuộc tính type được thiết lập là “password“.

Vi du Text Input trong HTML-Giuseart.com

cácphầntửfont,chẳnghạnnhưinput,textarea...title>VídụPassword Input trong HTML     cácphầntửfont,chẳnghạnnhưinput,textarea...êntàikhoản:       cácphầntửfont,chẳnghạnnhưinput,textarea...ậtkhẩu:

    cácphầntửfont,chẳnghạnnhưinput,textarea...

Một số loại form thường dùng trong HTML

Trong lập trình HTML và trong công việc thường ngày, chúng ta dễ dàng bắt gặp các loại form sau:

Các loại form nhập liệuType: Xác định kiểu dữ liệu người dùng nhập vào. Với password input thì chọn kiểu dữ liệu là “password“.

Nói đến form nhập liệu bạn sẽ hiểu ngay loại form này dùng để thu thập thông tin người dùng thông qua việc trực tiếp nhập thông tin vào khoảng trống cho sẵn. Các trường hợp người dùng nhập thông tin vào website có thể kể đến như điền Họ và tên, mật khẩu hoặc viết đoạn bình luận,… Do đó, chúng ta sẽ tìm hiểu 3 loại form nhập liệu sau:Name: Đặt tên cho trường để gửi tới Server xác nhận và xử lí yêu cầu.

+ Text input một dòng đơn: được sử dụng cho các mục đích thu thập thông tin chỉ một dòng của dữ liệu đầu vào của người dùng như các hộp tìm kiếm, các khung nhập username,… Text input được tạo ra bởi thẻ .Value: Xác định giá trị dữ liệu đầu vào lúc ban đầu của form.

+ Password input: đây cũng là kiểu nhập liệu một dòng đơn nhưng các ký tự của nó được giấu đi ngay khi người dùng nhập liệu. Loại form này sử dụng cho các khung điền mật khẩu đăng nhập.Size: Độ rộng của khung nhập mật khẩu, đơn vị là px.

+ Input nhiều dòng: được sử dụng cho các mục đích nhập liệu thông tin dài hơn một dòng, thường là comment, thông điệp hoặc nhiều mục đích khác,… Kiểu nhập liệu nhiều dòng được tạo ra bởi thẻ .Maxlength: Độ dài tối đa của mật khẩu.

Text input một dòng đơn

Để tạo form nhập liệu một dòng, chúng ta cần dùng thẻ với thuộc tính style là “text” theo cú pháp như ví dụ sau:.

Vi du Text Input trong HTML-Giuseart.com

cácphầntửfont,chẳnghạnnhưinput,textarea...title>Vi du Text Inputđadong     cácphầntửfont,chẳnghạnnhưinput,textarea...ãynóilêncảmnghĩcủabạnvề Giuseart.com:     cácphầntửfont,chẳnghạnnhưinput,textarea...ập phầnmôtảtạiđây....

    cácphầntửfont,chẳnghạnnhưinput,textarea...

Một số loại form thường dùng trong HTML

Trong lập trình HTML và trong công việc thường ngày, chúng ta dễ dàng bắt gặp các loại form sau:

Các loại form nhập liệuName: Cung cấp tên cho trường để có thể gửi tới Server và được Server xác nhận và nhận giá trị.

Nói đến form nhập liệu bạn sẽ hiểu ngay loại form này dùng để thu thập thông tin người dùng thông qua việc trực tiếp nhập thông tin vào khoảng trống cho sẵn. Các trường hợp người dùng nhập thông tin vào website có thể kể đến như điền Họ và tên, mật khẩu hoặc viết đoạn bình luận,… Do đó, chúng ta sẽ tìm hiểu 3 loại form nhập liệu sau:Rows: Xác định số hàng.

+ Text input một dòng đơn: được sử dụng cho các mục đích thu thập thông tin chỉ một dòng của dữ liệu đầu vào của người dùng như các hộp tìm kiếm, các khung nhập username,… Text input được tạo ra bởi thẻ .Cols: Xác định số cột.

+ Password input: đây cũng là kiểu nhập liệu một dòng đơn nhưng các ký tự của nó được giấu đi ngay khi người dùng nhập liệu. Loại form này sử dụng cho các khung điền mật khẩu đăng nhập.

+ Input nhiều dòng: được sử dụng cho các mục đích nhập liệu thông tin dài hơn một dòng, thường là comment, thông điệp hoặc nhiều mục đích khác,… Kiểu nhập liệu nhiều dòng được tạo ra bởi thẻ .

Text input một dòng đơn

Để tạo form nhập liệu một dòng, chúng ta cần dùng thẻ với thuộc tính style là “text” theo cú pháp như ví dụ sau: nhưng sử dụng thuộc tính type =”checkbox”.

Vi du Text Input trong HTML-Giuseart.com

Vi du Checkbox trong HTML!DOCTYPE html> Vi du Checkbox trong HTMLhtml> Vi du Checkbox trong HTMLhead> Chọnmộtloạihoa quảbạnyêuthích:title>Vi du Checkbox trong HTML Vi du Checkbox trong HTML/head> Vi du Checkbox trong HTMLbody> Vi du Checkbox trong HTMLform> Táotàuọnmộtloạihoa quảbạnyêuthích: Ổigănginput type="checkbox"name="taotau"value="on">Táotàu Mítinput type="checkbox"name="oigang" value="on">Ổigăng Dâutâyinput type="checkbox"name="mit"value="on">Mít và kết quả là:input type="checkbox"name="dautay"value="on">Dâutây Vi du Checkbox trong HTML/form> Vi du Checkbox trong HTML/body> Vi du Checkbox trong HTML/html>

Form checkbox trong html

Các thuộc tính của thẻ :

+ Type: Khai báo kiểu dữ liệu nhập vào cho form, trong trường hợp này type=”checkbox“.

+ Name: Xác định tên của trường để Server xác nhận và nhận giá trị.Type: Khai báo kiểu dữ liệu nhập vào cho form, trong trường hợp này type=”checkbox“.

+ Value: Giá trị sẽ được sử dụng nếu Checkbox được chọn.Name: Xác định tên của trường để Server xác nhận và nhận giá trị.

+ Checked: Thiết lập là checked nếu muốn để mặc định.Value: Giá trị sẽ được sử dụng nếu Checkbox được chọn.

Radio ButtonChecked: Thiết lập là checked nếu muốn để mặc định.

Radio Button được sử dụng khi có rất nhiều tùy chọn trong form, nhưng chỉ có một tùy chọn được phép chọn lựa. Thẻ này được sử dụng nhiều đề thiết kế các bài kiểm tra trắc nghiệm lựa chọn đáp án đúng nhất. Radio button được tạo ra khi sử dụng thẻ với thuộc tính type=”radio”.

Ví dụ về sử dụng Form tạo tạo một câu hỏi trắc nghiệm chọn đáp án đúng nhất: với thuộc tính type=”radio”.

Vi du Radio Box trong HTML

Vi du Checkbox trong HTML!DOCTYPE html> Vi du Checkbox trong HTMLhtml> Vi du Checkbox trong HTMLhead> NinhBình thuộcvùngnàocủanướcta?title>Vi du Radio Box trong HTML Vi du Checkbox trong HTML/head> Vi du Checkbox trong HTMLbody> Vi du Checkbox trong HTMLform> TâyBắcBộh2>NinhBình thuộcvùngnàocủanước ta? ĐôngBắcBộinput type="radio"name="selection"value="taybac">TâyBắc Bộ MiềnTrung-TâyNguyêninput type="radio"name="selection"value="dongbacbo">ĐôngBắcBộ Đông NamBộinput type="radio"name="selection"value="dongbacbo">MiềnTrung-TâyNguyên Tạo câu hỏi trắc nghiệm sử dụng forminput type="radio"name="selection"value="dongbacbo">Đông NamBộ Vi du Checkbox trong HTML/form> Vi du Checkbox trong HTML/body> Vi du Checkbox trong HTML/html>

Form checkbox trong html

Các thuộc tính của thẻ :

+ Type: Khai báo kiểu dữ liệu nhập vào cho form, trong trường hợp này type=”checkbox“.type thì type=”radio”.

+ Name: Xác định tên của trường để Server xác nhận và nhận giá trị.

+ Value: Giá trị sẽ được sử dụng nếu Checkbox được chọn. với các thẻ tùy chọn . Dưới đây là đoạn code về một ví dụ Form chứa hộp Select Box:

Vi du Checkbox trong HTML!DOCTYPE html> Vi du Checkbox trong HTMLhtml> Vi du Checkbox trong HTMLhead> + Checked: Thiết lập là checked nếu muốn để mặc định.title>Vi du Select Box trong HTML Vi du Checkbox trong HTML/head> Vi du Checkbox trong HTMLbody> Vi du Checkbox trong HTMLform> Radio Buttonạnsinhnămbao nhiêu Vi du Checkbox trong HTMLselect name="dropdown"> 1990option value="Maths"selected>1990 1991option value="Physics">1991 1992option value="Physics">1992 Vi du Checkbox trong HTML/select> Vi du Checkbox trong HTML/form> Vi du Checkbox trong HTML/body> Vi du Checkbox trong HTML/html>

Radio Button được sử dụng khi có rất nhiều tùy chọn trong form, nhưng chỉ có một tùy chọn được phép chọn lựa. Thẻ này được sử dụng nhiều đề thiết kế các bài kiểm tra trắc nghiệm lựa chọn đáp án đúng nhất. Radio button được tạo ra khi sử dụng thẻ với thuộc tính type=”radio”.

Ví dụ về sử dụng Form tạo tạo một câu hỏi trắc nghiệm chọn đáp án đúng nhất:

Vi du Radio Box trong HTMLName: Xác định tên được gửi tới Server để xác định và nhận giá trị.

NinhBình thuộcvùngnàocủanướcta?Size: Kích thước của hộp lựa chọn, thuộc tính này quy định hộp lựa chọn của bạn có thanh cuốn hay không?

TâyBắcBộMultiple: Chọn thuộc tính này cho phép bạn lựa chọn nhiều tùy chọn cùng lúc.

ĐôngBắcBộ

MiềnTrung-TâyNguyên với thuộc tính type=”button”. Thuộc tính type cũng có thể nhận các giá trị khác như submit, image, reset:

Đông NamBộSubmit: tạo nút chấp nhận một form hoặc thực thi thao tác gửi yêu cầu của người dùng.

Tạo câu hỏi trắc nghiệm sử dụng formButton: tạo một nút được sử dụng để kích hoạt một thao tác người dùng, có thể là chuyển trang, có thể là kích hoạt javascript…

Các thuộc tính của Radio Button cũng giống như Checkbox. Do đó, mời bạn xem phần thuộc tính của Checkbox ở phần trên nhé! Riêng phần thuộc tính type thì type=”radio”.Reset: tạo một nút để kích hoạt form về các giá trị ban đầu.

Select BoxImage: cũng tạo nút nhưng gọi hình ảnh làm hình nền cho nút đó.

Hộp Select box cung cấp danh sách liệt kê từ trên xuống [drop down] các tùy chọn đa dạng trong form, người dùng có thể lựa chọn một hoặc nhiều tùy chọn trong hộp đó. Để làm hộp Select Box, chúng ta sử dụng thẻ với các thẻ tùy chọn . Dưới đây là đoạn code về một ví dụ Form chứa hộp Select Box:

Vi du Checkbox trong HTML!DOCTYPE html> Vi du Checkbox trong HTMLhtml> Vi du Checkbox trong HTMLhead> Vi du Select Box trong HTMLtitle>Vi du button trong HTML Vi du Checkbox trong HTML/head> Vi du Checkbox trong HTMLbody> Vi du Checkbox trong HTMLform> Bạnsinhnămbao nhiêuylànútbấmsubmit: Vi du Checkbox trong HTMLinput type="submit" name="submit"value="Đăng ký"/> kết quả là:ylànútbấmreset: Vi du Checkbox trong HTMLinput type="reset" name="reset"  value="Hoàn tác"/> Thuộc tính của Select Box:ylànútbấmbutton: Vi du Checkbox trong HTMLinput type="button" name="ok"value="OK"  /> Vi du Checkbox trong HTML/form> Vi du Checkbox trong HTML/body> Vi du Checkbox trong HTML/html>

+ Name: Xác định tên được gửi tới Server để xác định và nhận giá trị.

+ Size: Kích thước của hộp lựa chọn, thuộc tính này quy định hộp lựa chọn của bạn có thanh cuốn hay không?

+ Multiple: Chọn thuộc tính này cho phép bạn lựa chọn nhiều tùy chọn cùng lúc.File Upload box. Nó được tạo ra nhờ sử dụng thẻ và thuộc tính type=”file”.

Các loại Form Nút bấm

Vi du Checkbox trong HTML!DOCTYPE html> Vi du Checkbox trong HTMLhtml> Vi du Checkbox trong HTMLhead> Form nút bấm hay còn gọi là Form Button được sử dụng nhiều để tạo các nút bấm có thể click được [clickable]. Để tạo các nút bấm, bạn có thể sử dụng thẻ với thuộc tính type=”button”. Thuộc tính type cũng có thể nhận các giá trị khác như submit, image, reset:title>Vi du File Upload Box trong HTML Vi du Checkbox trong HTML/head> Vi du Checkbox trong HTMLbody> + Submit: tạo nút chấp nhận một form hoặc thực thi thao tác gửi yêu cầu của người dùng.h4>Vuilònggửiprofileđểchúngtôixửlíyêu cầucủabạn: Vi du Checkbox trong HTMLform> Vi du Checkbox trong HTMLinput type="file"name="fileupload" accept="image/*"/> Vi du Checkbox trong HTML/form> Vi du Checkbox trong HTML/body> Vi du Checkbox trong HTML/html>

Form checkbox trong html

Các thuộc tính của thẻ :

+ Type: Khai báo kiểu dữ liệu nhập vào cho form, trong trường hợp này type=”checkbox“.

+ Name: Xác định tên của trường để Server xác nhận và nhận giá trị.

+ Value: Giá trị sẽ được sử dụng nếu Checkbox được chọn. Bài 8: Thẻ tạo bảng trong HTML

+ Checked: Thiết lập là checked nếu muốn để mặc định.