Button HTML là gì
Nội dung bài viết
Ở 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ẻ formLà 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.
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à
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 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 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: 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 Thuộc tính disabledkhô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 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 Ngược lại thuộc tính min đó chính là thuộc tínhmax, 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 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é 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 đ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ẻ labelLà 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 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é 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 Thẻ 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à buttonsẽ 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. 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. 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. 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 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ếtPhầ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.. 0 0 votes Article Rating Có thể bạn quan tâm:
|