Đọc truyện cac lenh trong html

♥ AzTruyen.Top - Trang đọc truyện hoàn toàn miễn phí!

cac lenh trong html

Trước Sau

Màu nền

Font chữ

Font size

Chiều cao dòng

Cách sử dụng mẫu biểu trong HTML:

Một mẫu biểu (form) trong HTML bao gồm nhiều thành phần khác nhau. Các thành phần có thể là ô văn bản, ô kéo thả, ô danh sách, nút bấm, hay các ô check ...

Mẫu biểu được bắt đầu bằng thẻ <form> và kết thúc bởi thẻ </form>. Giữa 2 cặp thẻ này, các bạn có thể sử dụng các cặp thẻ HTML khác.

Thẻ form có một số thuộc tính sau:

- method

Thuộc tính này có 2 giá trị POST hoặc GET, để xác định dữ liệu gửi lên theo kiểu POST hay GET.

Kiểu GET chính là kiểu mà khi nhập dữ liệu lên máy chủ, các dữ liệu này sẽ được hiển thị trên ô Address dưới dạng các căp tên=giá_tri. Nhược điểm của kiểu này là toàn bộ cái URL và xâu tên=giá_trị kia sẽ bị giới hạn dưới 255 ký tự (do đặc điểm của trình duyệt). Vì vậy để có thể gửi nhiều dữ liệu hơn, người ta đã sinh ra kiểu POST. Với kiểu này, dữ liệu sẽ không bị giới hạn chiều dài 255 ký tự của chuỗi địa chỉ do không bị gộp vào chuỗi địa chỉ. Kiểu POST cũng thường dùng để truyền các dữ liệu nhạy cảm mà người sử dụng không muốn hiển thị trên ô Address (password chẳng hạn).

Ví dụ:

<form method = "post"> Thử một tí

</form>

- action: Thuộc tính này sẽ chỉ định form gửi dữ liệu đến trang nào. Trong trường hợp thuộc tính này không được khai báo, form sẽ gửi thẳng dữ liệu và yêu cầu về chính trang hiện hành (sau đó trình duyệt sẽ tải lại nội dung mới).

Ví dụ:

<form method = "post" action ="thu2ti.php"> Thử hai tí

</form>

Tuy nhiên, 2 ví dụ trên chưa có ý nghĩa gì, vì chúng ta chưa trang bị các thành phần cơ bản của form như ô văn bản, nút bấm...

Các thẻ nhập vào (input)

Thẻ input có một số thuộc tính, mỗi thuộc tính sẽ quy định những chức năng riêng:

- name: Chỉ định tên cho thẻ. Tên này sẽ được gửi lên máy chủ cùng giá trị nhập vào cho thẻ.

- Value: Xác định giá trị đặt trước cho thẻ.

- type:

Thuộc tính này có một số giá trị sau:

* submit: Sẽ xác định một nút bấm (submit) mà khi kích chuột vào đó, form sẽ tự động kích hoạt và gửi dữ liệu đi

* text: Hiển thị một ô văn bản cho phép người sử dụng nhập văn bản

* password: Hiển thị ô văn bản để nhập password.

* hidden: Tạo một biến ẩn, ta có thể dùng nó để lưu trữ các dữ liệu "ẩn" khỏi người dùng, tất nhiên nếu họ biết View source lên thì chịu.

Ví dụ: đoạn mã sau sinh ra một form có 1 ô văn bản, một ô nhập mật khẩu và 1 nút bấm:

User Name:<input type="text" name="T1" size="20">

Password:

</form>

Thẻ tạo hộp chọn xổ xuống:

Danh sách sổ xuống là một ô danh sách cho phép bạn kích chọn 1 mục trong danh sách sẵn có.

Để tạo một hộp chọn sổ xuống, ta phải sử dụng 2 thẻ: Thẻ Select và thẻ Option như sau:

.....

</select>

Trong đó:

Thẻ Select với thuộc tính name sẽ xác định tên của hộp danh sách sổ xuống.

Các thẻ option xác định giá trị của tên biến trong thẻ select nếu được chọn. Giá trị sẽ được gán vào biến nằm trong thuộc tính value của thẻ option.

Ví dụ:

User Name:<input type="text" name="T1" size="20">

Password:

Sex: <Select name ="sex">

<option value =0>Female </option>

</select>

</form>

Khi người dùng kích chọn Male, giá trị 1 sẽ được chuyển vào biến sex (được định nghĩa trong thẻ Select>).

Các thẻ lựa chọn radio:

Các thẻ này sẽ cho phép hiển thị ra một danh sách các nút tròn, mà chúng ta sẽ chỉ được phép kích chọn 1 trong các nút đó.

Để hiển thị các nút radio này, các bạn có thể dùng thẻ input với type là radio. Một nhóm các nút radio này sẽ được thiết lập nếu như thuộc tính name của chúng trùng nhau:

Ví dụ dưới đây mô phỏng dòng chọn kiểu gõ (telex, VNI) trên diễn đàn:

<input type=radio name="switcher" value="OFF" >Tắt

<input type=radio name="switcher" checked value="TELEX" >Telex

<input type=radio name="switcher" value="VNI"> VNI

Thẻ nhập khối văn bản

Thẻ input với thuộc tính type = text chỉ cho phép ta hiển thị ra một ô văn bản nhỏ (hiện được 1 dòng). Để hiện ra một ô soạn thảo lớn, có thể hiển thị nhiều dòng đồng thời, ta phải dùng thẻ textarea:

Còn một số cặp thẻ khác, nhưng ít nhất thì tôi cũng không nhớ ra tại thời điểm này. Các bạn có thể vào FrontPage, sau đó sử dụng menu Insert/Form để chèn các thành phần này vào, sau đó các bạn có thể vào xem và thay đổi các thuộc cơ bản của chúng. Còn bây giờ, chúng ta quay lại với việc lấy dữ liệu của PHP:

Để lấy các biến theo kiểu POST, PHP sẽ tự động sinh ra mảng có tên là $HTTP_POST_VARS[]. Mảng này có chỉ số chính là tên của các phần tử trong form và giá trị là nội dung giá trị do người sử dụng nhập vào các phần tử có tên tương ứng. Chẳng hạn với mẫu biểu sau:

User Name:<input type="text" name="T1" size="20">

Password:

Sex: <Select name ="sex">

<option value =0>Female </option>

</select>

</form>« Last Edit: January 27, 2007, 04:43:03 AM bởi Admin » Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu

Gửi bởi: pegasus lúc: January 26, 2008, 05:02:29 AM []

ác min cho em hỏi.Có cách nào xây form,(bằng HTML) post một đoạn text lên ngay chỗ người vào xem, vừa đọc ko(như là góp ý đó) bằng html nha chứ PHP em đâu có biết(có cũng chưa biết xử dụng nó ra sao) nếu đựợc thì bằng JS cũng được nhưng cho em xin luôn vì em đang cần, nếu được thì em cám ơn nhiều nhiều!(post ko cần đăng nhập) Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu

Gửi bởi: cmxq lúc: January 26, 2008, 09:01:28 AM []

Tất nhiên là được, nhưng bạn nên biết rằng chỉ có người đó mới đọc được phần nội dung mà người đó post thôi, vì cách này xử lý dữ liệu trực tiếp trên máy khách và không được lưu trữ trên máy chủ, muốn người khác cũng đọc được thì vui lòng học ... php Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu

Gửi bởi: phpKungFu lúc: January 26, 2008, 09:36:27 AM []

Cũng có thể làm với JS, nhưng bạn không có server thì không lưu giữ liệu được. Cookie không đủ sức lưu các dữ liệu text dài.

Đây là 1 ví dụ:

Code:

<body>

blah blah blah blah

</div>

</div>

function addComment(){

textbox =document.getElementById('new_comment');

comment = textbox.value;

div_comments = document.getElementById('comments');

div_comments.innerHtml += "<hr />" + comment;

alert('comment added');

}

</script>

</body>

Tiêu đề(Title) cho trang web :

Guests are not allowed to view html code.

-Liên kết thông qua text :

Guests are not allowed to view html code.

-Liên kết đến các section trong trang hiện thời :

Tạo ra section:

Guests are not allowed to view html code.

-Text liên kết đến section:

Guests are not allowed to view html code.

-Liên kết thông qua picture:

Guests are not allowed to view html code.

-Tạo liên kết gốc :

Guests are not allowed to view html code.

II)Các lệnh với chữ :

-Chữ đậm : Guests are not allowed to view html code.

-Chữ nghiêng : Guests are not allowed to view html code.

-Chữ gạch chân:Guests are not allowed to view html code.

-Tạo đoạn : Guests are not allowed to view html code.

-Viết theo lề:Guests are not allowed to view html code.Ngoài right bạn có thể thay bằng left, center.

-Xuống dòng :Guests are not allowed to view html code.

-Chữ ngăn cách bởi gạch ngang : Guests are not allowed to view html code.

-Định kích cỡ và độ dài dòng gạch ngang : Guests are not allowed to view html code.

-Tạo heading:Guests are not allowed to view html code.

-Tạo chú thích: Guests are not allowed to view html code.

-Tạo pre-formated:Guests are not allowed to view html code.

III)Tạo vùng hình ảnh

Tạo image-map (vùng hình ảnh) : Guests are not allowed to view html code.

Đặt tên cho vùng Guests are not allowed to view html code.

Xác định toạ độ cho vùng và hình dạng : Guests are not allowed to view html code.

với x,y,z,t là các số nguyên chỉ toạ độ ;

SHARP có thể có các dạng như "RECT","POLY","Circle"

HREF="URL" có nhiệm vụ tạo liên kết đến URL khi ta ấn vào vùng chọn

Thêm Border="0" để bỏ khung, Alt="tùy bạn ghi" để khi rê chuột vào ảnh sẽ hiện text lên.

Vậy 1 thẻ Img sẽ có các tag sau (bạn có thể lược bỏ nếu thấy k cần thiết)

Guests are not allowed to view html code.

IV)Làm việc với trang:

-Tạo mầu nền: <body bgcolor="rrggbb">

với rr,gg,bb là các số tương ứng với tỉ lệ màu đỏ , xanh lá cây , xanh dương, hoặc bạn có thể trực tiếp ghi tên màu hoặc mã màu: Green,Blue,... hoặc #000000,..

-Lấy ảnh làm nền : khai báo trong phần body : <body background="link hình ảnh nền">

V)Tạo table:

-Tạo table: Guests are not allowed to view html code.

-Tạo cột :Guests are not allowed to view code.

-Thêm nội dung cột :Guests are not allowed to view html code.

-Tạo heading :Guests are not allowed to view html code.

-Kích thước lề:Guests are not allowed to view html code.

-Độ rộng cột:Guests are not allowed to view html code.

-Tạo tiêu đề: Guests are not allowed to view html code.

-Căn giá trị :Guests are not allowed to view html code. trong đó có 3 kiểu: LEFT,RIGHT,CENTER

Xem thêm tại đây: http://www.vietvbb.vn/up/showthread.php?t=9751

VI)Tạo form:

(Form chứa thông tin để gửi tới server )

-Tạo form:

Guests are not allowed to view html code.

Trong đó ACTION="_URL_" chỉ ra server cần gửi thông tin đến

METHOD="METHOD" chỉ ra phương thức gửi POST hoặc GET

+POST là gửi từng phần

+GET là gửi toàn bộ

-Chọn kiểu dữ liệu cho form:

Guests are not allowed to view html code.

-Kiểu dữ liệu là TEXT:

Guests are not allowed to view html code.

Trong đó : SIZE là kích thước text , maxlength là độ dài tối đa của chuỗi kí tự

name là tên của form

-Nhập form text dạng password:

password:Guests are not allowed to view html code.

-Nhập form text dạng ẩn:

hidden:Guests are not allowed to view html code.

-Tạo nút chọn kiểu YES-NO(tạo ra 2 ô để ta đánh dấu lựa chọn):

Guests are not allowed to view html code.

-Tạo check box(có thể chọn nhiều mục bằng cách đánh dấu) :

Ví dụ dưới đây sẽ tạo ra 1 form lựa chọn các kiểu computer mà bạn thích, có thể chọn hơn 1 kiểu:

Guests are not allowed to view html code.

-Tạo reset form :

Form này có nhiệm vụ xoá các lựa chọn trong check box , đưa check box trở về trạng thái ban đầu:

Đặt form này ngay đằng sau của check box:

Guests are not allowed to view html code.

-Gửi thông tin trong form tới server:

Đặt form này ngay đằng sau của check box:

Guests are not allowed to view html code.

-Tạo pop-up menus:

pop-up menus là form có dạng hộp check , khi ta ấn vào hộp thì các mục trong hộp sẽ hiện ra

Dưới đây sẽ tạo ra pop-up cho 1 form lựa chọn kiểu thanh toán cho khách hàng

Guests are not allowed to view html code.

-Tạo list box:

List box cũng giống như text box nhưng chỉ khác ở cách trình bày , nó hiện ra 1 danh sách lựa chọn

Dưới đây sẽ tạo ra 1 danh sách các hệ điều hành cho khách hàng lựa chọn , khách hàng có thể lựa chọn

nhiều hơn 1 hệ điều hành :

Guests are not allowed to view html code.

VI)Tạo frames:

Người ta có thể chia trang web ra làm nhiều frame , mỗi frame gần giống như 1 trang web độc lập với nhau ,

tức 1 frame có thể load nội dung mới mà không ảnh hưởng tới các frame còn lại .

-Tạo frame:

Đặt các lệnh sau trong phần <body>....</body>

Guests are not allowed to view html code.

-Tạo frame theo cột:

Guests are not allowed to view html code.

Chuỗi lệnh trên tạo ra 2 frame nằm dọc ngăn cách nhau bởi cột 200(tính theo pixe)

Cú pháp lệnh là COLS="number,*"

-Tạo frame theo hàng:

Guests are not allowed to view html code.

Chuỗi lệnh trên tạo ra 2 frame nằm ngang ngăn cách nhau bởi hàng 100

Cú pháp lệnh là ROWS="number,*"

-Làm frame mở ra trang web mới :

Guests are not allowed to view html code.

Chuỗi lệnh này tạo ra 2 frame nằm ngang phân nhau tại hàng 100 , frame thứ nhất có nội dung là trang

http://www.abc.com/page1.htm , frame thứ 2 có nội dung là trang http://www.def.com/page2.htm .

-Đặt kích thước cho margin(viền) của frame:

Với viền trái hay phải(dùng cho các frame nằm dọc ) : MARGINWIDTH="number"

Với viền trên hay dưới(dùng cho các frame nằm ngang): MARGINHEIGHT="number"

number là độ dầy của viền tính theo pixe

-Đặt chức năng cuộn cho frame:

Muốn cho frame có thể cuộn đặt : SCROLLING="YES"

Muốn cho frame không thể cuộn đặt : SCROLLING="NO"

-ĐẶt liên kết giữa các frame:

Bạn có thể khiến cho 1 frame chứa các mục , khi ta ấn vào 1 mục thì nội dung của mục đó hiển thị ở frame

kia (giống như trang ktlehoan.com) như sau:

Guests are not allowed to view html code.

Như vậy khi bạn ấn vào dòng chữ Link_text ở frame thứ nhất thì nội dung của trang page1.htm sẽ hiển thị tại frame thứ 2 .II)Các lệnh với chữ :

-Chữ đậm : <B>Các chữ cần viết đậm</B>

-Chữ nghiêng : <I>Các chữ cần viết nghiêng</I>

-Chữ gạch chân:<U>Các chữ cần gạch chân</U>

-Tạo đoạn : <P> Các chữ trong đoạn</P>

-Viết theo lề:<P ALIGHN=Right>Các chữ trong đoạn văn</P>

-Xuống dòng :<BR>Chữ cần viết trong dòng mới

-Chữ ngăn cách bởi gạch ngang : <HR>Các chữ ngăn cách với dòng trên bởi gạch ngang

-Định kích cỡ và độ dài dòng gạch ngang : <HR size=5 with=50%>Text

-Tạo heading: <H#> dòng tiêu đề </H#> trong đó # có giá trị nhỏ dần 1 đến 6

-Tạo chú thích:

-Tạo pre-formated: <PRE>Đoạn văn ở chế độ pre-formated</PRE-FORMATED>

III)Tạo vùng hình ảnh

Tạo image-map (vùng hình ảnh) : <img src="image.gif" usermap='#map_name'>

Đặt tên cho vùng <MAP NAME="tên vùng">

Xác định toạ độ cho vùng và hình dạng : <AREA COORDS="x,y,z,t" SHARP="RECT" HREF="URL">

với x,y,z,t là các số nguyên chỉ toạ độ ;

SHARP có thể có các dạng như "RECT","POLY","Circle"

HREF="URL" có nhiệm vụ tạo liên kết đến URL khi ta ấn vào vùng chọn

IV)Làm việc với trang:

-Tạo mầu nền: <body bgcolor="rrggbb">

với rr,gg,bb là các số tương ứng với tỉ lệ màu đỏ , xanh lá cây , xanh dương

-Lấy ảnh làm nền : khai báo trong phần body : background="tên hình ảnh nền"

V)Tạo table:

-Tạo table: <TABLE>Nội dung của bảng </TABLE>

-Tạo cột : <TR> Nội dung của cột </TR>

-Thêm nội dung cột : <TD> Nội dung </TD>

-Tạo heading : <TH> heading </TH>

-Kích thước lề:<TABLE BORDER="Number">....</TABLE>

-Độ rộng cột: <TABLE WIDTH="Number">....</TABLE>

-Tạo tiêu đề: <CAPTION> tiêu đề </CAPTION>

-Căn giá trị :<TABLE Alighn="Kiểu">....</TABLE> trong đó có 3 kiểu: LEFT,RIGHT,CENTER

VI)Tạo form:

(Form chứa thông tin để gửi tới server )

-Tạo form:

Trong đó ACTION="_URL_" chỉ ra server cần gửi thông tin đến

METHOD="METHOD" chỉ ra phương thức gửi POST hoặc GET

+POST là gửi từng phần

+GET là gửi toàn bộ

-Chọn kiểu dữ liệu cho form:

</FORM>

-Kiểu dữ liệu là TEXT:

name:<INPUT NAME="name" TYPE="TEXT" SIZE="size" MAXLENGTH="number">

</FORM>

Trong đó : SIZE là kích thước text , maxlength là độ dài tối đa của chuỗi kí tự

name là tên của form

-Nhập form text dạng password:

password:<INPUT TYPE="PASSWORD" NAME="PASS" SIZE="size">

-Nhập form text dạng ẩn:

hidden:<INPUT TYPE="HIDDEN" NAME="HIDDEN" SIZE="size">

-Tạo nút chọn kiểu YES-NO(tạo ra 2 ô để ta đánh dấu lựa chọn):

<P>

YES</P>

<P>

NO</P>

</P>

-Tạo check box(có thể chọn nhiều mục bằng cách đánh dấu) :

Ví dụ dưới đây sẽ tạo ra 1 form lựa chọn các kiểu computer mà bạn thích, có thể chọn hơn 1 kiểu:

<P>Type of Computer</P>

<P>

PENTIUMII</P>

<P>

PENTIUMIII</P>

<P>

PENTIUMIV</P>

-Tạo reset form :

Form này có nhiệm vụ xoá các lựa chọn trong check box , đưa check box trở về trạng thái ban đầu:

Đặt form này ngay đằng sau của check box:

<P>

</P>

-Gửi thông tin trong form tới server:

Đặt form này ngay đằng sau của check box:

<P>

</P>

-Tạo pop-up menus:

pop-up menus là form có dạng hộp check , khi ta ấn vào hộp thì các mục trong hộp sẽ hiện ra

Dưới đây sẽ tạo ra pop-up cho 1 form lựa chọn kiểu thanh toán cho khách hàng

<P ALIGHN="CENTER">Kiểu thanh toán

<OPTION VALUE="C2">Cheque</OPTION>

<OPTION VALUE="C3">Creditcard</OPTION>

</SELECT>

</P>

-Tạo list box:

List box cũng giống như text box nhưng chỉ khác ở cách trình bày , nó hiện ra 1 danh sách lựa chọn

Dưới đây sẽ tạo ra 1 danh sách các hệ điều hành cho khách hàng lựa chọn , khách hàng có thể lựa chọn

nhiều hơn 1 hệ điều hành :

<P ALIGHN="CENTER">Các hệ điều hành

</SELECT>

</P>

VI)Tạo frames:

Người ta có thể chia trang web ra làm nhiều frame , mỗi frame gần giống như 1 trang web độc lập với nhau ,

tức 1 frame có thể load nội dung mới mà không ảnh hưởng tới các frame còn lại . Bạn có thể thấy ví dụ về

trang web có chia frame như ở website www.ktlehoan.com .

-Tạo frame:

Đặt các lệnh sau trong phần <body>....</body>

-Tạo frame theo cột:

Chuỗi lệnh trên tạo ra 2 frame nằm dọc ngăn cách nhau bởi cột 200(tính theo pixe)

Cú pháp lệnh là COLS="number,*"

-Tạo frame theo hàng:

Chuỗi lệnh trên tạo ra 2 frame nằm ngang ngăn cách nhau bởi hàng 100

Cú pháp lệnh là ROWS="number,*"

-Làm frame mở ra trang web mới :

</FRAMSET>

Chuỗi lệnh này tạo ra 2 frame nằm ngang phân nhau tại hàng 100 , frame thứ nhất có nội dung là trang

http://www.abc.com/page1.htm , frame thứ 2 có nội dung là trang http://www.def.com/page2.htm .

-Đặt kích thước cho margin(viền) của frame:

Với viền trái hay phải(dùng cho các frame nằm dọc ) : MARGINWIDTH="number"

Với viền trên hay dưới(dùng cho các frame nằm ngang): MARGINHEIGHT="number"

number là độ dầy của viền tính theo pixe

-Đặt chức năng cuộn cho frame:

Muốn cho frame có thể cuộn đặt : SCROLLING="YES"

Muốn cho frame không thể cuộn đặt : SCROLLING="NO"

-ĐẶt liên kết giữa các frame:

Bạn có thể khiến cho 1 frame chứa các mục , khi ta ấn vào 1 mục thì nội dung của mục đó hiển thị ở frame

kia (giống như trang ktlehoan.com) như sau:

Như vậy khi bạn ấn vào dòng chữ Link_text ở frame thứ nhất thì nội dung của trang page1.htm sẽ hiển thị tại frame thứ 2 .

Bạn đang đọc truyện trên: AzTruyen.Top

Trước Sau

Tags: