Form trong html (Bài 3) – Gia Sư Tin Học

Posted on by mtoplistChuyên mục:Top List

Form trong html được sử dụngđể nhận dữ liệu từ phía user và gởi yêu cầu đến trang xử lý. 

Những thành phần nhập liệu được gọi là Form Field bao gồm Text Field, TextArea, Password Field, Check Box, Radio Button, File, List, Submit, Reset, …

Form trong html – Ví dụ

Form trong html – Cấu trúc form

<form action = "trang xử lý" method = "GET|POST" name = "form name">
<!--các phần tử của form trong html đặt tại đây-->
<input ...>
</form>

Trong đó

<input type = "button | text | checkbox | file | radio | submit | reset | password | ..." name = "name" id = "id" value = "value"/>

Ví dụ

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>form trong html</title>
</head>
<body>
 <form name="dangnhap" action="dangnhap.php" method="post">
   Tên đăng nhập: <input type="text" name="tendn"/> <br/>
   Mật khẩu:  <input type="password" name="matkhau"/>
   <input type="submit" value = "Đăng nhập"/>
</form>
</body>
</html>

Kết quả khi hiển thị trên trình duyệt

Form trong html – Các thành phần của form

Text Field: Dùng để nhập một dòng văn bản

<input type = "text" name = "name" id = "id" value = "value" maxlength = "length" size = "size" />

Ví dụ

<html>
 <body>
  <form action="">
    First name: <input type="text" name="firstname"/> <br>
    Last name:<input type="text" name="lastname"/>
   </form>
 </body>
</html>

Kết quả khi chạy trên trình duyệt

Password Field: Dùng để nhập mật khẩu

<input type = "password" name = "name" id = "id" value = "value" size = "size" maxlength = "length"/>

Ví dụ

<input type = "password" name = "matkhau" size = "20" maxlength = "10"/>

Check Box: Cho phép người dùng lựa chọn một hoặc nhiều phương án

<input type = "checkbox" name = "name" id = "id" value = "value" [checked] />

Ví dụ

<html>
 <head>
  <title>form trong html</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
  <form action="">
    Tôi có xe máy: <input type="checkbox" name="pt" value="Xe máy" />
    <br />
    Tôi có xe hơi: <input type="checkbox" name="pt" value="Xe hơi" />
    <br />
    Tôi có phi cơ: <input type="checkbox" name="pt" value="Phi cơ" />
   </form>
 </body>
</html>

Kết quả khi hiển thị trên trình duyệt

Radio Button: Cho phép người dùng lựa chọn một trong nhiều phương án có thể

<input type = "radio" name = "name" id = "id" value = "value" [checked] />

Ví dụ

<html>
 <head>
  <title>form trong html</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
  <form action="">
   Nam: <input type="radio" name="gioitinh" value="Nam" checked/>
   <br />
   Nữ: <input type="radio" name="gioitinh" value="Nữ" />
  </form>
 </body>
</html>

Kết quả khi hiển thị trên trình duyệt

TextArea: Dùng để nhập văn bản có nhiều dòng

<textarea cols = "column" rows = "row" name = "name" id = "id" >content</textarea>

Ví dụ:

<textarea cols = "20" rows = "5 name = "chuthich">Vui lòng nhập chú thích tại đây</textarea>

Submit Button: Nút phát lệnh và gửi dữ liệu đến trang xử lý. Mỗi form trong html chỉ có một nút submit

<input type = "submit" name = "name" value = "value" />

Ví dụ

<form name = "myform" method = "post"  action = "#">
  <input type = "submit" name = "dongy" value = "Đồng ý" />
</form>

Kết quả khi hiển thị trên trình duyệt

Reset Button: Dùng để trả lại giá trị mặc định cho các thành phần trong form

<input type="reset" value = "value" />

Ví dụ

<html>
 <head>
  <title>form trong html</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
   <form name = "myform" method = "post" action = "#">
    Họ tên: <input type="text" name="ht"> <br/>
    Giới tính: Nam <input type="radio" name="gt" value="Nam">
    Nữ <input type="radio" name="gt" value="Nữ"> <br/>
    Sở thích: Đọc sách
    <input type="checkbox" name="st" value = "Đọc sách">
    Xem phim
    <input type="checkbox" name="st" value = "Xem phim">
    <br/>
    <input type="reset" value = "Nhập lại" />
   </form>
 </body>
</html>

Trước khi click vào “Nhập lại”

Sau khi click chuột

Combo Box: Dùng để tạo danh sách xổ xuống cho phép người dùng lựa chọn

<select name = "name">
[<optgroup label = "label">]
<option [selected] value = "value">Text</option>
.......
[</optgroup>]
<option [selected] value = "value">Text</option>
.......
</select>

Xác thực dữ liệu form trong html 

Đặt vấn đề: Kiểm tra số vừa nhập có nằm trong đoạn từ 1 đến 10 hay không?

Dữ liệu không hợp lệ

Dữ liệu hợp lệ

JavaScript JavaScript là một trong 3 ngôn ngữ mà tất cả các nhà phát triển web phải tìm hiểu:

  • HTML để xác định nội dung của các trang web
  • JavaScript để tạo sự tương tác cho các trang web
  • CSS để xác định bố cục của trang web

Khai báo JavaScript:

  • JavaScript được đặt trong thẻ <head>
  • Mã lệnh (Code) của JavaScript phải được đặt ở giữa <script> và </script>

Khai báo hàm trong JavaScript Hàm là một khối mã lệnh được thiết kế để thực hiện một nhiệm vụ cụ thể

<html >
<head>
<meta charset="utf-8" />
<title>Hàm trong JavaScript</title>
<script>
 function tinhTong(a, b) {
 document.getElementById("demo").innerHTML = a + b;
 }
</script>
</head>
<body onload="tinhTong(7, 7)">
<p id="demo"></p>
</body>
</html>

Cú pháp khai báo hàm trong JavaScript Hàm có tham số

function Tên_Hàm(Tham số 1, Tham số 2, Tham số 3) {
Mã lệnh được thực hiện
}

Hàm không có tham số

function Tên_Hàm() {
Mã lệnh được thực hiện
}

Câu lệnh if-else trong JavaScript: Thực thi một lệnh hoặc khối lệnh tuỳ thuộc vào điều kiện Cú pháp khai báo if-else

if(Điều kiện) {
  Mã lệnh được thực hiện trong trường hợp THOÃ điều kiện
} else {
  Mã lệnh được thực hiện trong trường hợp KHÔNGTHOÃ điều kiện
}
<html>
<head>
<meta charset="utf-8" />
<title>Câu lệnh if-else trong JavaScript</title>
<script>
function tinhThuong() {
var n1 = prompt("Nhập số thứ nhất:",0);
var n2 = prompt("Nhập số thứ hai: ",0);
var kq = 0;
if (n2 == 0) {
 alert("Lỗi phép tính: Không thể chia cho 0.");
 } else {
 result = n1/n2;
 alert("Kết quả: " + result);
 }
}
</script>
</head>
<body onload="tinhThuong()">
</body>
</html>

Xác thực dữ liệu trong form với JavaScript Bước 1: Xây dựng hàm

function Tên_Hàm() {
//Tham chiếu đến các thành phần trong form bằng cách sử dụng 1 trong 2 lệnh sau
document.getElementById("Id của thành phần trong form")
//Hoặc document.forms["Tên form"]["Name của thành phần trong form"]
Sử dụng câu lệnh if-else để kiểm tra
}

Bước 2: Gọi hàm

Ví dụ mẫu về xác thực dữ liệu

<html>
<head>
<meta charset="utf-8" />
<title>Xác thực dữ liệu với JavaScript</title>
<script>
//Bước 1: Khai báo hàm
function tinhTong(){
 //Kiểm tra dữ liệu có được nhập hai không?
 var n1 = document.getElementById("n1").value;
 var n2 = document.getElementById("n2").value;
 if(n1 == ""){
 alert("Vui lòng nhập số thứ nhất");
 return;
 }
 if(n2 == ""){
 alert("Vui lòng nhập số thứ hai");
 return;
 }
 //Tính tổng
 var kq = Number(n1) + Number(n2);
 alert("Tổng hai số là: " + kq);
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="400" border="1" align="center" cellpadding="3" cellspacing="0">
<tr>
<td colspan="2" align="center">Thực hiện phép tính tổng</td>
</tr>
<tr>
<td align="right">Nhập số thứ nhất:</td>
<td><input type="text" id="n1" /></td>
</tr>
<tr>
<td align="right">Nhập số thứ hai:</td>
<td><input type="text" id="n2" /></td>
</tr>
<tr>
<td> </td>
<td><input type="button" value="Tính tổng" onclick="tinhTong()"/>
 
<input type="reset" value="Nhập lại" /></td>
</tr>
</table>
</form>
</body>
</html>

Chưa nhập số và click chuột vào Tính tổng Tổng kết bài học:

  • Thiết kế trang web sử dụng form trong html
  • Xác thực dữ liệu sử dụng JavaScript

From trong html – Bài tập thực hành

Bài thực hành số 1:

Yêu cầu:

  • Tiêu đề trang: Máy tính
  • Yêu cầu người dùng phải nhập 2 số trước khi thực hiện các phép tính
  • Thực hiện các phép tính tương ứng với các nút +, -, * và /
  • Tên tập tin html: maytinh.html

Bài thực hành số 2:

Yêu cầu:

  • Tiêu đề trang: Thông tin thành viên
  • Yêu cầu người dùng phải nhập thông tin tại những trường có dấu sao (*)
  • Tên tập tin html: dangky.html

Tài nguyên

  • Tải tập tin hình ảnh tại đây

Bài thực hành số 3:

form trong html

mtoplist