Các phần tử chính của biểu mẫu

2.1 Phần tử <input>

Biểu mẫu là một phần quan trọng của trang web và cho phép người dùng nhập và gửi dữ liệu. Các phần tử biểu mẫu chính bao gồm <input>, <textarea> và <button>. Những phần tử này cho phép người dùng nhập văn bản, chọn các tùy chọn, tải lên tệp và thực hiện các hành động khác.

Phần tử <input> là một trong những phần tử biểu mẫu thường được sử dụng nhất. Nó hỗ trợ nhiều loại dữ liệu đầu vào và có thể được sử dụng cho nhiều mục đích khác nhau như nhập văn bản, chọn tệp, chỉ định ngày tháng, v.v.

Cú pháp chung:

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

Thuộc tính của <input>

• type: xác định loại nhập
• name: tên của phần tử biểu mẫu, dùng để nhận diện dữ liệu trên server
• id: định danh duy nhất của phần tử
• value: giá trị ban đầu của phần tử
• placeholder: văn bản hiển thị bên trong phần tử trước khi nhập dữ liệu
• required: chỉ định rằng phần tử là bắt buộc để điền

Ví dụ về <input>

input-text cho phép nhập văn bản một dòng.

    
      <input type="text" name="username" id="username" placeholder="Nhập tên người dùng" required>
    
  

2.2 Phần tử <textarea>

Phần tử <textarea> được sử dụng để nhập văn bản nhiều dòng. Nó khác với <input type="text"> ở chỗ cho phép nhập văn bản có nhiều dòng và có thể được tùy chỉnh kích thước.

Cú pháp chung:

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

Thuộc tính của <textarea>

• name: tên của phần tử biểu mẫu, dùng để nhận diện dữ liệu trên server
• id: định danh duy nhất của phần tử
• rows: số dòng của văn bản
• cols: số ký tự trong một dòng
• placeholder: văn bản hiển thị bên trong phần tử trước khi nhập dữ liệu
• required: chỉ định rằng phần tử là bắt buộc để điền

Ví dụ sử dụng:

    
      <label for="comments">Bình luận:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Nhập bình luận của bạn vào đây..."
        required>
      </textarea>
    
  

Tùy chỉnh kiểu <textarea>

Phần tử <textarea> có thể được tùy chỉnh với CSS để cải thiện giao diện và trải nghiệm người dùng.

Ví dụ tùy chỉnh:

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* chỉ có thể thay đổi kích thước theo chiều dọc */
      }
    
  

    
      <label for="comments">Bình luận:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Nhập bình luận của bạn vào đây..." required>
      </textarea>
    
  

2.3 Phần tử <button>

Phần tử <button> được sử dụng để tạo các nút trong biểu mẫu. Không giống như <input type="button">, phần tử <button> linh hoạt hơn và cho phép chèn các phần tử HTML khác nhau, như văn bản, hình ảnh, v.v.

Cú pháp chung:

    
      <button type="type" name="name" id="id" value="value">Nội dung nút</button>
    
  

Ví dụ sử dụng:

    
      <button type="submit">Gửi</button>
      <button type="reset">Làm mới</button>
      <button type="button" onclick="alert('Nút đã được bấm!')">Bấm vào tôi</button>
    
  

Thuộc tính của <button>

1. type: xác định hành vi của nút. Các giá trị có thể có:
   • submit: gửi biểu mẫu (giá trị mặc định)
   • reset: làm mới biểu mẫu
   • button: nút tùy ý, không thực hiện hành động theo mặc định
2. name: tên của phần tử biểu mẫu, dùng để nhận diện dữ liệu trên server.
3. id: định danh duy nhất của phần tử.
4. value: giá trị gửi lên server khi gửi biểu mẫu.

HTML lồng nhau trong <button>

Phần tử <button> cho phép chèn các phần tử HTML khác nhau bên trong để tạo nút phức tạp hơn.

Ví dụ với HTML lồng nhau:

    
      <button type="type" name="name" id="id" value="value">
        📨Gửi
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Gửi">
        Gửi
      </button>
    
  

Tùy chỉnh kiểu <button>

Phần tử <button> có thể được tùy chỉnh với CSS để cải thiện giao diện và trải nghiệm người dùng.

Ví dụ tùy chỉnh:

    
      button {
        background-color: #4CAF50; /* Nền xanh lá */
        color: white; /* Văn bản màu trắng */
        padding: 15px 20px; /* Khoảng cách bên trong */
        border: none; /* Không có viền */
        border-radius: 4px; /* Góc bo tròn */
        cursor: pointer; /* Con trỏ chuột */
      }

      button:hover {
        background-color: #45a049; /* Nền xanh lá đậm khi đặt chuột vào */
      }
    
  

    
      <button type="submit">Gửi</button>