Sét đoạn
html này:
Mã nguồn:[Chọn]
<form name="the_form" action="new.html">
Tên:<input type="text" name="name" /><br />
Email:<input type="text" name="email" /><br
/>
Con cái
Có/Chưa:<input type="checkbox" name="co" /><br
/>
Giới tính:<select name="gioi">
<option value="0">Nử</option>
<option value="1">Nam</option>
</select><br />Con đầu lòng của
bạn
5 tuổi
<input type="radio" name="con" value="1" />
10 tuổi<input type="radio" name="con" value="2" />
15 tuổi<input type="radio" name="con" value="3"
/><br />
Ghi chú:<textarea name="note">Ghi chú của
bạn</textarea>
<input type="submit" name="sumit" value="Gửi" />
</form>
Xem trên browser thì sẽ giống thế này:
Ví dụ này có các trường biểu mẩu phổ biến nhất bao gồm text,select,
radio và textarea.
Khi gửi form đi, dữ liệu sẽ được chuyễn tới một trang có tên là
new.html(action="new.html"). trang này là trang chứa javascript xử lý
thông tin.
Dĩ nhiên bạn có thể đặt code javascript ngay tại trang bạn viết mã
html, nhưng nếu muốn làm thế, để code javascript hoạt động đúng cách
mong muốn, bạn nên viết một hàm, và kích hoạt nó khi form được gửi khi
nhấn nút submit Để làm việc với js nư đã nói trước, các bạn cần đặt tên
cho chúng bằng thuộc tính name và cái js lưu ý đến thứ 2 chính là value.
Đối với các trường biểu như text thuộc tính value không nhất thiết có
mặt trong các thẻ vì giá trị của nó sẽ được thêm vào khi người dùng
nhập thông tin vào.
Trường hợp bạn đặt mặc định giá trị sẽ xuất hiện trên trường thì bạn có
thể thêm vào thuộc tính value, giá trị của trường sẽ là chuỗi cuối cùng
trước khi người dùng gửi biểu mẩu.(người dùng vẫn có thể thay đổi)
Nếu bạn muốn lưu một giá trị nào đó mà không muốn người dùng biết và
dửa đổi, hãy dùng trường hidden kèm theo thuộc tính value
Đối với phần tử select,name được luu trữ trong tag mở select,và value
được lưu giữ trong tag mở option.
Checkbox thuộc tính value cần có sẵn, checkbox sẽ được dùng trong
trường hợp câu trả lời chỉ có hai loại kết quả hay là một dạng đánh dấu.
Ví như bạn hỏi người đó có con chưa, nếu checkbox được họn, gái trị của
check box sẽ được gửi đi. Khi bạn bắt đầu làm việc, bạn sẽ thấy giá trị
"co" như trên ví dụ của chúng ta sẽ cho biết là người dùng đả chọn, hay
là bạn có một danh sách các mặt hàng, bạn muốn biết người dùng có thích
những mặt hàng đó hay không, một loạt các checkbox với tên mặt hàng sẽ
rất hiệu quả.
Radio cái này dùng khi bạn có một câu hỏi, nhiều đáp án và người dùng
chỉ được chọn 1 trong nhiều. tất cả các nút radio trong cùng một nhóm
(các đáp án dành cho cùng 1 câu hòi chằng hạn) phải có cùng tên, và tất
nhiên là khác giá trị.
textarea value của textarea không nằm trong tag mở của nó,mà nằm giữa
hai cặp thẻ. Bạn vẫn tham chiếu tới nó và thuộc tính value của nó như
mọi phần tử form khác, nhưng nếu muốn đặt sẵn giá trị thì điều bạn cần
làm là đặt giá trị đó vào giữa hai cặp thẻ đóng và mở của nó.
Bắt đầu nhào vô làm việc!
Các bạn đã đọc qua bài giả thích về các dấu chấm chưa!? Nếu chưa thì
hãy nhín một chút thời gian và đọc qua ha.
Trích dẫn
Các dấu chấm trong một dòng js sẽ phân tách các đối tượng, khi
javascript bắt gặp một chuỗi các đối tượng được ngăn cách bởi các dấu
chấm, nó sẽ đi dần xuống dối tượng cuối cùng trong chuỗi đó.
Uhm, và đối tượng lớn nhất chính là window, tất cả văn bản html sẽ chứa
trong đối tượng document.
Để thám chiếu tới bất cứ một phần tử nào của form, ta điều cần làm như
thế này:
window.document.<tên form>.<tên đối tượng>
trong trường hợp này, giả sử mình tham chiếu tới trường
text"name"(trường yêu cầu người dùng điền tên) thì code sẽ là:
Mã nguồn:[Chọn]
window.document.the_form.name
và để lấy giá trị của nó (giá trị của thuộc tính value)
Mã nguồn:[Chọn]
window.document.the_form.name.value
Để thiết lập giá trị ta làm bằng cách:
Mã nguồn:[Chọn]
window.document.the_form.name.value="giá trị bạn muốn thiết lập";
Một ví dụ tĩnh lượt và đơn giản
Hảy điền tên bạn vào và nhấn nút.
Mã nguồn:[Chọn]
<script language="javascript">function guestname()
{
alert(document.the_form.name.value);
}
</script>
<form name="the_form">
Tên: <input type="text" name="name" />
<br />
<input type="submit" name="gui" onclick="guestname();"/>
</form>
Kết quả:
Nhưng người ta thường dùng cách này hơn:
Mã nguồn:[Chọn]
<form name="the_form" onsubmit="guestname();">
Tên: <input type="text" name="name" />
<br />
<input type="submit" name="submit" />
</form>
thehe9x.wap.sh-học java script
Thay vì kích hoạt scpirt với thuộc tính onclick đặt ở nút submit, người
ta kích hoạt hàm với sự kiện onsubmit trên tag mở form.Tại sao ư!? Xem
tiếp bài sau nhé.