Tag và thuộc tính html – P1

Tag và thuộc tính html – P1 giải thích tác dụng các tag : a, img, table, select, input. Cách sự dụng tag và các thuộc tính html của nó

Tag và thuộc tính html

Khi sử dụng các tag html để tạo trang web, bạn có thể dùng các thuộc tính html đi kèm với tag để diễn tả nội dung thông tin. Ví dụ 

<input id="un" placeholder="Nhập username" class="txt" type="text">

Bài viết tag và thuộc tính html – P1 này sẽ liệt kê và giải thích cách dùng một vài tag phổ biến và các thuộc tính của nó, để bạn tham khảo và sử dụng khi tạo trang web của mình.

Các thuộc tính html trong mọi tag

Bảng sau là các thuộc tính html hầu như có thể dùng trong mọi tag:

Thuộc tínhMô tả
idTên định danh duy nhất của tag trong trang web.
classClass css để định dạng tag
hiddenẨn tag khi trang web hiện trong browser
contenteditableCho phép user nhập nội dung trong tag khi xem trang web
titleChữ mô tả hiện ra khi user đưa chuột vào tag
styleDùng để định dạng css cho tag
<div id="mota" contenteditable="true" style="width:500px; height:200px; background:Coral">
Nhập mô tả sản phẩm
</div>

Tag IMG và các thuộc tính html

Tag img là gì

img là tag dùng để nhúng 1 hình vào trang web. Mỗi trang web có thể nhúng nhiều hình, mỗi hình là 1 tag img. Cú pháp như sau: 

<img src="địa chỉ file hình" thuoctinh="giatri"/>

Cách dùng tag img

Sau đây là ví dụ về cách dùng img

<img src="https://longnv.name.vn/hinh/songdep1.jpg" width="300" heigh="200" alt="Sống đẹp" />

Các thuộc tính html của tag img

Tag img có một số thuộc tính như sau

Thuộc tínhMô tả
srcĐịa chỉ file hình
widthĐộ rộng của hình
heightĐộ cao của hình
altMô tả hình (search engine dùng)
titleMô tả hình (text hiện ra khi user đưa chuột vào hình)
alignCách canh của hình (left, right, top, bottom, middle)
hspaceKhoảng cách giữa hình với xung quanh theo chiều ngang. Không hỗ trợ trong HTML5.
vspaceKhoảng cách giữa hình với xung quanh theo chiều dọc. Không hỗ trợ trong HTML5.

Tag A và các thuộc tính html

Tag a là gì

Tag a là tag dùng để tạo nên liên kết trong trang web. Nghĩa là trong trang web của bạn, chỗ nào muốn liên kết đến các trang web khác thì tạo ra tag a. Cú pháp như sau: 

<a href="địa chỉ trang web" thuoctinh="giatri"> Chữ/hình trong liên kết</a>

Cách dùng tag a 

<a href="lienhe.html" name="lh" title="Liên hệ quản trị">Liên hệ</a> | 
<a href="https://longnv.name.vn" target="_blank">Thầy Long Web</a>

Các thuộc tính html của tag a

Tag a có một số thuộc tính như sau:

Thuộc tínhMô tả
hrefĐịa chỉ của trang web sẽ tải về khi user nhắp vào.
nameTên của liên kết
targetChỉ định nơi để mở trang web trong href, _blank : cửa sổ mới mỗi lần user nhắp, _parent : cửa sổ cha, _top : cửa sổ trình duyệt, tên bắt kỳ: cửa sổ mới
titleMô tả liên kết (text hiện ra khi user đưa chuột vào liên kết)

Tag TABLE và các thuộc tính html

Tag table là gì

Tag table dùng để trình bày các bảng có nhiều cột nhiều hàng. Trong table có nhiều tag con là tr ( mỗi tr là một hàng trong table). Mỗi tr lại có nhiều tag con là td hoặc th. Tag td, th là các ô trong từng hàng.

<table>
<tr><td>...</td> <td>...</td></tr>
<tr><td>...</td> <td>...</td></tr>
<tr><td>...</td> <td>...</td></tr>
</table>

Cách dùng tag table

<table border="1" width="500" align="center" cellspacing="0" cellpadding="4">
    <caption>BÀI HÁT HAY</caption>
    <tr>
        <td>Sống vui</td>
        <td>Hạnh phúc bây giờ</td>
        <td>Bạn và tôi</td>
    </tr>
    <tr>
        <td>Hội vui</td>
        <td>Hiểu và thương</td>
        <td>Đã về đã tới</td>
    </tr>
</table>

Các thuộc tính html của tag table

Khi dùng tag table, các thuộc tính sau bạn có thể dùng:

Thuộc tínhMô tả
alignCách canh của table (left, right, center)
bgcolorMàu nền của table.
borderĐường viền của table.
cellpaddingKhoảng cách từ viền đến nội dung trong cell.
cellspacingKhoảng cách giữa các cell.
widthĐộ rộng của table.

Tag SELECT và các thuộc tính html

Giới thiệu tag select

Là tag dùng để hiện danh sách các mục cho user chọn. Mỗi mục bên trong là tag option. Mỗi option có thuộc tính value và chữ bên trong. 

<select thuoctinh="giatri"> ... </select>

Cách dùng tag select

Sau đây là các ví dụ về cách dùng tag select

<select name="chontinh">
  <option value="">Chọn tỉnh</option>
  <option value="hn">Hà nội</option>
  <option value="hcm">Hồ Chí Minh</option>
  <option value="dn">Đà Nẵng</option>
  <option value="ct">Cần Thơ</option>
  <option value="hp">Hải Phòng</option>
</select>

Ví dụ khác dùng tag select 

<select name="loaisach" size="3" multiple="true">
<option value="1">Nghệ thuật sống</option>
<option value="2">Học làm người</option>
<option value="3">Trinh thám</option>
<option value="4">Lịch sử</option>
<option value="5">Khoa học</option>
<option value="6">Tiếng Anh</option>
</select>

Các thuộc tính html của tag select

Khi dùng tag select, bạn có thể dùng một số thuộc tính html sau

Thuôc tínhVí dụMô tả
autofocusautofocus=”true”Làm cho tag select tự động được chọn lúc nạp trang
disableddisabled=”true”Khóa tag select, không cho user chọn
multiplemultiple=”true”Cho phép chọn nhiều mục .
namename=”tensp”Tên của tag select
sizesize=”5″Số mục có thể thấy trong danh sách

Tag INPUT và các thuộc tính html

Giới thiệu tag input

Là tag dùng để cho user nhập thông tin vào. Thông tin mà user nhập có thể là chữ, hoặc dạng số, ngày, dạng file tùy vào thuộc tính type mà bạn chỉ định 

<input thuoctinh="giatri"/>

Ví dụ về tag input

<h2>Một số dạng của tag input: </h2>
<form>
Địa chỉ mail: <input type="email" name="em"  autofocus="true" /> <p></p>
Họ và tên : <input type="text" name="hoten" minlength="6"/> <p>
Mật khẩu  : <input type="password" name="username" maxlength="30"/> <p>
Ngày sinh: <input type="date" name="ns"  /> <p>
Hình ảnh: <input type="file" name="hinh" multiple="true" />  <p>
Học lớp : <input type="number" name="lop"  min="1" max="12"> <p>
Giới tính: 
<input type="radio" name="phai" value="1"/> Nam
<input type="radio" name="phai" value="0"/> Nữ <p> 
Sở thích:  
<input type="checkbox" name="st" checked="checked"/> Nhìn mưa rơi
<input type="checkbox" name="st"/> Nghe chim hót
<input type="checkbox" name="st"/> Ngắm mây bay<p>
<input type="submit" value="Đăng ký"> 
<input type="reset" value="Xóa"> 
<input type="button" value="Kiểm tra">
</form>

Ví dụ khác về tag input

<h2>Một số dạng của tag input: </h2>
<form>
Chọn màu: <input type="color" name="mau"> <p>
Website : <input type="url" name="url"> <p>
Phone : <input type="tel" pattern="[0-9]{4}[0-9]{2}[0-9]{2}[0-9]{2}"> <p>
Từ khóa <input type="search"> <p>
<input type="submit" value="Gửi"/>
</form>

Các thuộc tính html của tag input

Thuộc tínhVí dụMô tả
autofocusautofocus=”autofocus”Làm cho tag tự động được chọn lúc nạp trang
checkedchecked=”checked”Để cho tag ở trạng thái được chọn, dùng cho radio và checkbox
disableddisabled=”true”Khóa tag, không cho user nhập thông tin vào, giá trị không được gửi đi khi submit
maxlengthmaxlength=”30″Số ký tự tối đa được nhập trong tag
minlengthminlength=”6″Số ký tự tối thiểu phải nhập trong tag
maxmax=”12″Số tối đa được phép nhập, dùng trong loại type là number
minmin=”1″Số tối thiểu được phép nhập, dùng trong loại type là number
multiple multiple =”true”Cho phép chọn nhiều mục. Dùng trong loại type là file, email (cách nhau bởi dấu phẩy)
namename=”hoten”Tên của tag input
pattern 
placeholder placeholder=”Tối đa 30 ký tự”Chữ chỉ dẫn để user nhập đúng
readonlyreadonly=”true”Khóa tag input, không cho user nhập thông tin vào, giá trị được gửi đi khi user submit
required required =”true”Quy định user phải nhập thông tin vào tag input này mà không được bỏ qua
sizesize=”10″Chỉ định số ký tự có thể trông thấy. Dùng trong các loại text, search, url, email, password.
typetype=”number”Quy định loại thông tin sẽ nhập trong tag (text, password, email, number, file, date, datetime, button, submit, reset, search, url, hidden, image, time, year, month…
valuevalue=”1″Giá trị trong tag input

Bài tag và thuộc tính html – P1 chỉ liệt kê và giải thích một vài tag phổ biến và các thuộc tính thường dùng của nó. Các tag khác sẽ được đề cập sau. Nếu muốn xem thêm, mời bạn xem thêm ở các link này:

BÀI VIẾT LIÊN QUANXEM THÊM