29 tháng 4, 2019

Cách tạo Form và chèn Iframe trong HTML

I. Cách tạo biểu mẫu (Form)

1. Biểu mẫu được tạo như sau
<form>
        Các thẻ nhập dữ liệu
</form>

2. Các thẻ nhập dữ liệu trong biểu mẫu gồm
- Tạo ô gõ ký tự
  <input type="text" />                                    
- Tạo ô đánh dấu tích
  <input type="checkbox" />  
- Tạo ô tròn đánh dấu chấm
  <input type="radio" /> 
- Tạo mục tải file lên
  <input type="file" />
- Tạo danh sách sổ xuống
  <select>
            <option> Giá trị 1 </option>
            <option> Giá trị 1 </option>
            ............................................
            <option> Giá trị n </option>
  </select>
- Tạo vùng nhập ký tự lớn
  <textarea> </textarea> 

Các bạn xem hình để hiểu rõ tác dụng của các thẻ trên nhé. 


Để có được nhiều ô checkbox, nhiều ô radio, nhiều danh sách sổ xuống thì các bạn chỉ việc thêm nhiều thẻ nhập dữ liệu vào mà thôi. Rất đơn giản đúng không.

Nào giờ các bạn hãy thử thực hành nhé
Để tạo được biểu mẫu như hình trên các bạn cần tạo một bảng gồm 7 hàng và 2 cột. Hàng đầu tiên thì gộp 2 cột với nhau. Sau đó chèn các thẻ input vào các ô trong bảng.
Vì đây chỉ là ví dụ nên mình chỉ cho 1 vài giá trị vào để làm mẫu

Lưu ý: 
- Ở phần nhập giới tính, mình đặt thêm thuộc tính name="gioitinh" vào cả 2 mục namnữ là để người dùng chỉ được chọn 1 trong 2 giá trị. Nếu bạn khai báo name không giống nhau hoặc không thêm thuộc tính này thì người dùng sẽ chọn được cả 2 giá trị namnữ. Để hệ thống mặc định chọn giới tính nam thì bạn thêm thuộc tính checked="checked" vào mục nam nhé. 
- Ở phần textarea thì kích thước của khung được tính bằng số cột và số hàng. Sau này học đến phần CSS thì cũng không cần dùng thuộc tính này. Giờ làm thử thôi. hehehe.
<textarea cols="số cột" rows="số hàng"> </textarea>


Kết quả ta được như sau:

II. Iframe

Iframe là một khung nội tuyến được sử dụng trong một trang web để nhúng một tài liệu HTML khác vào bên trong nó. Ví dụ như video, ảnh, website khác ...
Iframe không trực tiếp tạo ra nội dung mà nó chứa nội dung HTML từ một nguồn khác.

Ví dụ: 
<iframe src="https://www.nhaccuatui.com/vh/auto/jRuQaPrqrZiha" width="620" height="350" frameborder="0" allowfullscreen allow="autoplay"></iframe>

Ta được kết quả như sau: 

Trong ví dụ này là mình đã chèn một video từ nguồn nhaccuatui.com, nếu trang nhaccuatui xóa hoặc thay đổi đường link của video này thì khung Iframe sẽ không chạy video được nữa. 

Hãy đóng góp ý kiến của bạn vào phần bình luận bên dưới để mình hoàn thiện các bài viết hơn nhé. ^^

SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!