HTML cơ bản toàn tập cho người mới phần 2

Bài viết được sự cho phép của tác giả Trần Anh Tuấn

Ở phần trước mình đã hướng dẫn cho các bạn các kiến thức về các thẻ hay dùng trong HTML nhất, tuy nhiên trong HTML thì còn rất nhiều thẻ khác và đi kèm với chúng là những thuộc tính nữa. Trong bài ngày hôm nay chúng ta sẽ cùng nhau khám phá và tìm hiểu thêm các thẻ trong form và table nhé. Bắt đầu thôi nào.

# Các thẻ về form

## Thẻ form

Là thẻ block, thẻ này thường được dùng khi các bạn muốn gửi dữ liệu tới server như đăng nhập, đăng ký, cập nhật thông tin thông qua việc submit form. Trong thẻ form này có nhiều thuộc tính mà các bạn cần nắm rõ như sau.

• Thuộc tính action truyền vào đường dẫn hoặc file xử lý thông tin của form khi được người dùng nhấn nút submit
• Thuộc tính method thì nó liên quan tới các phương thức HTTP khi submit form, nếu các bạn học cơ bản tới đây thì chưa cần phải hiểu quá những cái này, sau này các bạn học tới Javascript rồi làm việc với API Server thì các bạn sẽ nắm rõ mấy này hơn
• Thuộc tính name giúp phân biệt giữa các form với nhau nếu các bạn sử dụng nhiều form trong một trang web
• Thuộc tính autocomplete có giá trị mặc định là on nghĩa là nó sẽ hiển thị gợi ý khi các bạn đăng nhập hay đăng ký các bạn đưa chuột vào ô gõ thì nó gợi ý ra email chẳng hạn thì đó gọi là autocomplete, nếu các bạn muốn tắt nó đi thì chỉ cần thiết lập autocomplete="off" là được
• Thuộc tính enctype định nghĩa các kiểu dữ liệu mà sẽ được gửi tới server, như là chữ, hay html hay là hình ảnh…

<form name="signup" action="/signup" method="post" autocomplete="off" enctype="text/plain"></form>

Minh hoạ một form cơ bản

## Thẻ input

Là thẻ inline, và là thẻ tự đóng, thẻ này thường được dùng bên trong thẻ form ở trên, thẻ này có nhiều thuộc tính và trong các thuộc tính thì lại có rất nhiều giá trị mà các bạn nên biết và nắm rõ cách dùng nhé.

Đầu tiên là thuộc tính type, trong thuộc tính này có các giá trị như là

• Giá trị text, cho phép người dùng nhập vào kí tự nào cũng được như chữ, số, email…
• Giá trị email khá giống giá trị text tuy nhiên trình duyệt sẽ hiểu đây là kiểu email cho nên buộc người dùng phải nhập vào email hợp lệ, khi ở trên thiết bị điện thoại thì bàn phím dành cho email sẽ hiển thị lên với dấu @ mà các bạn có thể thử
• Giá trị number thì phải nhập vào là số như số nguyên hoặc số lẻ, trên thiết bị điện thoại thì bàn phím số sẽ hiển thị lên tương ứng
• Giá trị password để khi người dùng nhập mật khẩu sẽ hiển thị dấu *
• Giá trị date sẽ hiển thị ngày khi người dùng nhập vào ngày tháng năm
• Giá trị time sẽ hiển thị thời gian khi người dùng muốn chọn thời gian
• Giá trị file để người dùng muốn upload file lên ví dụ như cập nhật avatar thì phải có input là file để người dùng chọn được ảnh họ muốn
• Giá trị checkbox là nút check cho phép người dùng chọn hoặc bỏ chọn, hoặc có thể chọn nhiều cái, như khi liệt kê danh sách sở thích và người dùng có thể chọn nhiều cái trong đó hoặc không chọn cái nào
• Giá trị radio cũng là nút check nhưng chỉ được chọn 1 trong 2 hoặc 1 trong nhiều thứ chứ không được chọn nhiều ví dụ khi người dùng chọn giới tính nam hoặc nữ
• Giá trị submit sẽ làm cho nó trơ thành nút submit để người dùng khi điền xong thông tin và nhấn nút này hoặc nhấn nút Enter thì form sẽ submit dữ liệu.

<input type="email"/>

Tiếp theo là thuộc tính placeholder, thuộc tính này giúp tạo ra một lớp chữ mờ bên trong input khi mà người dùng chưa nhập nội dung vào

<input type="email" placeholder="Email"/>

Placeholder

Thuộc tính value tức là giá trị của input để khi submit form thì người ta sẽ lấy những giá trị này đưa lên server xử lý, tuy nhiên làm sao để lấy được những giá trị này thì phải dựa vào thuộc tính name bên dưới đây.

Thuộc tính name giúp phân biệt giữa các input với nhau và cũng rất quan trọng, nó được dùng khi làm việc với Javascript để lấy dữ liệu từ các input dựa vào thuộc tính name này. Và khi làm việc với input có type là checkbox hay radio thì thuộc tính name này truyền vào giá trị cho các checkbox hay radio cùng tên để có thể lấy dữ liệu chính xác ví dụ nếu các bạn làm với radio chọn giới tính mà các bạn code như này

<input type="radio" value="male"/>
<input type="radio" value="female"/>

Các bạn không truyền vào name hoặc truyền vào name khác nhau thì khi submit form nó sẽ hiểu là 2 giá trị khác nhau do name khác nhau và người dùng có thể chọn cả 2 giá trị cả nam lẫn nữ trong khi đó bạn muốn chỉ chọn một trong hai thôi cho nên để khắc phục thì các bạn thêm trường name vào và giống nhau như sau:

<input type="radio" value="male" name="gender"/>
<input type="radio" value="female" name="gender"/>

Thuộc tính required khi mà các bạn muốn trường đó buộc người dùng phải nhập vào nếu không nhập vào thì sẽ không submit form được

<input type="email" placeholder="Email" required/>

Thuộc tính disabled không cho phép người dùng nhấn vào input hay là làm gì cả, thuộc tính này các bạn sẽ dùng khi muốn cho người ta thấy được giá trị nhưng không thể làm gì chẳng hạn những hệ thống người ta không cho bạn đổi email chẳng hạn thì người sẽ thêm thuộc tính này vào

<input type="email" placeholder="Email" disabled/>

Input bị disabled

Thuộc tính min dùng với input có type là number có nghĩa là số nhỏ nhất mà người dùng phải nhập vào ví dụ nhập tuổi các bạn muốn tuổi nhỏ nhất phải là 18 thì sẽ có min=”18″

<input type="number" min="18" name="age"/>

Ngược lại thuộc tính min đó chính là thuộc tính max, nghĩa là số lớn nhất mà người dùng có thể nhập vào ví dụ tuổi lớn nhất là 100 thôi chẳng hạn

<input type="number" min="18" max="100" name="age"/>

Tương tự cho input type là text hay email chẳng hạn bạn muốn người dùng nhập vào tối thiểu bao nhiêu ký tự hay tối đa bao nhiêu ký tự thì chúng ta sẽ dùng 2 thuộc tính tương ứng là minlength và maxlength nhé

<input type="text" minlength="10" maxlength="200"/>

Thuộc tính readonly thì na ná với disabled là không làm được gì cái input cả, chỉ có cái khác là nó vẫn có thể focus còn disabled thì không, khi submit form thì input có readonly vẫn sẽ được gửi dữ liệu tới server còn input có disabled thì không.

<input type="number" min="18" readonly/>

Input đang dùng readonly

Ngoài ra input vẫn sử dụng được các thuộc tính thông dụng như class hoặc id nhé các bạn. Và thuộc tính id trong input hay được dùng khi làm việc với thẻ Label dưới đây

## Thẻ label

Là thẻ inline, thẻ này thường được dùng với input, textarea để khi người dùng nhấn vào nó thì nó sẽ tự động trỏ tới input hay textarea để focus vào chúng thông qua thuộc tính for trong label

<label for="name">Name</label>

Thuộc tính for này sẽ trỏ tới id của input cho nên trong input cần có id tương ứng với giá trị trong for của label như sau, ở đây for có giá trị là name và input có id cũng là name, lưu ý id không được trùng nhau nhé

<label for="name">Name</label>
<input type="text" id="name" placeholder="Please enter your name..."/>

Thẻ label trong thực tế

## Thẻ textarea

Là thẻ inline, thẻ này cũng giống thẻ input là đều có các thuộc tính như input, điểm khác ở đây là textarea cho phép người dùng nhập vào nhiều nội dung và có thể enter xuống hàng còn input thì không được. Nó thường được dùng khi cho người dùng nhập vào mô tả thông tin cá nhân, hay là soạn thảo bài viết…

<textarea name="content" placeholder="Type something if you want"></textarea>

## Thẻ button

Là thẻ inline, thẻ này được dùng trong form khi người dùng nhấn vào để gửi dữ liệu đã nhập vào hoặc xoá hết dữ liệu. Thẻ button này có thuộc tính type với 3 giá trị là submit để submit dữ liệu và reset để xoá hết dữ liệu trong form khi nhập vào(khá nguy hiểm), cuối cùng là button sẽ không có tác dụng gì khi nhấn vào.

Thẻ button cũng có thuộc tính disabled nghĩa là không cho phép người dùng nhấn vào hay làm gì cả, kiểu như sau này các bạn làm việc với Javascript các bạn check nếu người dùng nhập đầy đủ thông tin thì mới cho nhấn chẳng hạn thì ban đầu sẽ có thuộc tính disabled, khi người dùng nhập hợp lệ thì mới xoá thuộc tính disabled đi.

<button type="submit" class="form-submit">Sign in</button>

Thẻ button

## Thẻ fieldset

Là thẻ khi các bạn muốn gom nhóm các trường lại như input, button, textarea vào chung rồi disabled một nhóm luôn thay vì disabled từng cái.

<form action="/subscribe" method="post">
  <fieldset disabled>
    <legend>Subscribe to the Newsletter</legend>
    <input type="email" name="email">
    <button>Ok</button>
  </fieldset>
</form>

## Thẻ select option

Là thẻ block, thẻ này sẽ hiển thị dưới dạng dropdown cho phép các bạn chọn một danh sách được xổ ra trong thẻ select này sẽ có các thẻ option đi kèm với đó là value tương ứng cho option mà các bạn chọn. Trong thẻ select cũng có trường name như những thẻ input vì để phân biệt và sử dụng trong form nha.

<select name="option">
  <option value="Option A">Option A</option>
  <option value="Option B">Option B</option>
  <option value="Option C">Option C</option>
</select>

Tuy nhiên select mặc định không được đẹp cho nên thường người ta sẽ tuỳ biến lại bằng các thẻ HTML khác như div, ul li thay vì dùng select option mặc định(do mặc định không tuỳ biến với CSS được) rồi sau đó dùng Javascript để lấy dữ liệu, và tuỳ biến lại thì sẽ đẹp hơn mặc định nhiều ví dụ

Custom dropdown

## Sự khác nhau giữa input type submit và button type submit

Nhiều bạn có hỏi là 2 thẻ này khác nhau ra sao thì mình xin giải thích cho các bạn biết nhen. Khi các bạn dùng input type submit thì nó là thẻ tự đóng cho nên không truyền HTML vào giữa được, còn thẻ button thì các bạn có thể chèn HTML vào giữa như sau

<input type="submit" value="Submit"/>
<button type="submit"><i class="fa fa-plus"></i><span>Submit</span></button>

Thẻ button thì có thể dùng pseudo như :before hay :after còn input type submit thì không. Do vậy thường khi làm việc với form đa số sẽ dùng thẻ button hơn vì có thể tuỳ biến được nhiều hơn như hình dưới này mình dùng thẻ button và có loading bên trong khi submit form.

Button loading

# Tạm kết

Phần này chỉ nói đến các thẻ trong Form thôi mà cũng nhiều kiến thức phết. Hi vọng nó sẽ có ích cho các bạn mới học nha. Ở phần tiếp theo mình sẽ nói đến các thẻ khác như thẻ về bảng, các thẻ meta….. Chúc các bạn học tập tốt và một ngày tốt lành nhen.

Bài viết gốc được đăng tải tại evondev.com

Có thể bạn quan tâm:

• HTML cơ bản toàn tập cho người mới phần 1
• Cách trở thành 1 Kỹ sư Phần mềm thực tập chỉ với 4 tháng tự học
• Hiệu quả của testing với TDD trong Laravel

Xem thêm các việc làm Developer hấp dẫn tại TopDev