Đoạn code form login HTML cơ bản

0
84

Với bài học trước, Devpro Việt Nam đã giúp bạn có thêm những hiểu biết về HTML và những bài học cơ bản để lập trình HTML. Hôm nay chúng ta sẽ đi tìm hiểu chi tiết từng bài học, trước hết là hướng dẫn code forum login trên html.

  • Form đăng ký

Bao gồm 9 thông tin cơ bản về: Tài khoản, mật khẩu, nhập lại mật khẩu, email, học tên, giới tính, quê quán, sở thích và ghi chú cá nhân.

Để thực hiện được form ký bạn sử dụng đoạn code HTML sau:

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>T4VN – FORM ĐĂNG KÝ THÔNG TIN</title>

<script type=”text/javascript”>

<!–CODE SẼ ĐƯỢC TRÌNH BÀY Ở PHẦN 2–>

</script>

</head>

<body>

<div class=”body”>

<center><h1>ĐĂNG KÝ THÔNG TIN CÁ NHÂN</h1></center>

<form name=”xuly” action=”” method=”post”>

<table border=”0″ cellpadding=”0″ cellspacing=”0″>

<tr class=”table”>

   <td class=”left”><p>Tài khoản </p></td>

   <td class=”right”><p><input type=”text” name=”taikhoan”></p></td>

</tr>

<tr class=”table”>

   <td class=”left”><p>Mật khẩu</p></td>

   <td class=”right”><p><input type=”password” name=”matkhau”></p></td>

</tr>

<tr class=”table”>

   <td class=”left”><p>Nhập lại mật khẩu</p></td>

   <td class=”right”><p><input type=”password” name=”lapmatkhau”></p></td>

</tr>

<tr class=”table”>

   <td class=”left”><p>Email</p></td>

   <td class=”right”><p><input type=”text” name=”email”></p></td>

</tr>

<tr class=”table”>

   <td class=”left”><p>Họ tên</p></td>

   <td class=”right”><p><input type=”text” name=”hoten”></p></td>

</tr>

<tr class=”table”>

   <td class=”left”><p>Giới tính</p></td>

   <td class=”right”><p><input type=”radio” checked name=”gioitinh”> nam <input type=”radio” name=”gioitinh”> nữ</p></td>

</tr>

<tr class=”table”>

   <td class=”left”><p>Quê quán</p></td>

   <td class=”right”>

          <p>

       <select name=”quequan”>

         <option value=”CanTho”>Cần Thơ</option>

         <option value=”DongThap”>Đồng Tháp</option>

         <option value=”SocTrang”>Sóc Trăng</option>

       </select>

       </p>

   </td>

</tr>

<tr class=”table”>

   <td class=”left”><p>Sở thích</p></td>

   <td class=”right”><p><input type=”checkbox” name=”dienanh” checked> Điện ảnh <input type=”checkbox” name=”amnhac”> Âm nhạc <input type=”checkbox” name=”thethao”> Thể thao</p></td>

</tr>

<tr class=”table”>

   <td class=”left”><p>Ghi chú cá nhân</p></td>

   <td class=”right”><p><textarea style=”height:100px;width:auto” name=”ghichu”></textarea></p></td>

</tr>

<tr>

<td colspan=”2″>

 <center><input type=”button” value=”Lưu” name=”luu”> <input type=”reset” value=”Nhập lại” name=”nhaplai”></center>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

Như vậy bạn đã hoàn thành được bước tạo khung đăng kí cho người dùng, tiếp theo là tạo lập form đăng nhập.

> Giải đáp thắc mắc: Nên học php hay html

  • Form đăng nhập

Tùy vào trang web mà bạn sẽ lựa chọn thiết kế đăng nhập sao cho phù hợp, tuy nhiên Devpro khuyên bạn nên lựa chọn form đơn giản tránh gây dối mắt.

Dưới đây là form table:

Bạn thực hiện code HTML như sau:

Trong đó:

  • Thẻ <input> để chúng ta tạo một ô để nhập văn bản vào. (Các type trong thẻ <input> phải nhập đúng giá trị). Tất cả các thẻ phải nằm trong cặp thẻ <form> </form>.
  • Thuộc tính action dùng để link đến một trang web khác khi người dùng nhập vào username + password và nhấp OK  ở ví dụ trên là xulyform.html.
  • Method = “post” là thuộc tính thông thường được sử dụng trong một form. Ngoài ra có thêm một số thuộc tính khác như Method=”get”.
  • Placeholder là đoạn text sẽ hiện ra trong ô nhập user và password nhằm mục đích hướng dẫn người dùng.
  • Button Reset có type là reset nhằm khôi phục lại giá trị ban đầu.
  • Button Ok có type là submit có ý nghĩa là gửi đi.

Có thể thấy việc tạo dựng form đăng kí và đăng nhập trên HTML khá đơn giản, hãy tiến hành thử ngay và đợi kết quả thôi nào. Chúc các bạn thành công.

Sau khi đã code được form login trên html rồi các bạn có thể thực hành làm bài login trên php tại link: Hướng dẫn code login trong PHP

BÌNH LUẬN

Please enter your comment!
Please enter your name here

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.