Tự học HTML - Tạo form đăng ký cho website

Tuỳ vào từng trang mà những thông tin họ cần lấy ở người dùng, trong bài viết này Lớp học bình dân trình bày cách tạo form đăng lý với đầy đủ các thông tin cơ bản để thu thập thông tin của thành viên câu lạc bộ.

Sản phẩm cuối cùng ta thu được form có dạng như sau:

Dưới đây là mã html để tạo form đăng nhập:

<form method="post" action="thucthi.html">
      <fieldset class="form-dangky">
        <legend>Đăng ký thành viên CLB</legend>
        <h3>Thông tin đăng ký</h3>
        <div class="form-dang-ky">
          <div class="item">
            <label for="name" id="label-name">Nhập tên của bạn(<span class="required">*</span>)</label>
            <input type="text" id="name" value="thanh">
          </div>
          <div class="item">
            <label for="email">Nhập email của bạn(<span class="required">*</span>)</label>
            <input type="text" id="email" class="email">
          </div>
          <div class="item">
            <label for="password">Nhập Password</label>
            <input type="password" id="password">
          </div>
          <div class="item">
            <label for="phone">Nhập số điện thoại</label>
            <input type="number" id="phone">
          </div>
          <div class="item">
            <label for="gioitinh">Giới tính</label>
            <div>
              <input type="radio" id="nam" name="gioitinh" checked="">
              <label for="nam">Nam</label>
              <input type="radio" id="nu" name="gioitinh">
              <label for="nu">Nữ</label>
            </div>
          </div>
          <div class="item">
            <label>Sở thích</label>
            <div>
              <input type="checkbox" id="bongda" checked="">
              <label for="bongda">Bóng đá</label>
              <input type="checkbox" id="bongban">
              <label for="bongban">Bóng bàn</label>
              <input type="checkbox" id="caulong">
              <label for="caulong">Cầu lông</label>
            </div>
          </div>
          <div class="item">
            <label for="birthday">Ngày sinh</label>
            <input type="datetime-local" id="birthday">
          </div>
          <div class="item">
            <label for="tinh">Tỉnh/thành phố</label>
            <select id="tinh">
              <option value="1">Hà Nội</option>
              <option value="2">Nam Định</option>
              <option value="3">Thái Bình</option>
              <option value="4">Hải Phòng</option>
              <option value="5">Ninh Bình</option>
              <option value="6">Quảng Ninh</option>
              <option value="7">Thanh Hoá</option>
              <option value="8">Hưng Yên</option>
              <option value="9">Hà Nam</option>
              <option value="10">Bắc Ninh</option>
              <option value="11">Băng Giang</option>
            </select>
          </div>
          <div class="item">
            <label for="img-profile">Ảnh đại diện</label>
            <input type="file" id="img-profile">
          </div>
          <div class="item">
            <label for="img-profile">Giới thiệu bản thân</label>
            <textarea rows="5" id="motabanthan" cols="20"></textarea>
          </div>
          <div class="item divid">

            <button type="button" onclick="kiemtra()" id="btnSubmit">
              Đăng ký
            </button>
            <button type="reset" id="btnReset">Làm lại</button>
            <button class="btn">Đăng nhập
          </button></div>
        </div>
      </fieldset>
    </form>

Dưới đây là đoạn mã css

.form-dangky {
        width: 500px;
        margin: 9% auto;
      }
      .item {
        margin: 8px 0;
        display: flex;
      }
      
      .item label {
        width: 200px !important;

      }
      .required {
        color: red;
      }
      .divid{
        display: flex;
        gap: 10px;
        justify-content:space-evenly;
      }
      .divid button{
        width: 50%;
        padding: 10px;
      }
      h3{
        text-align: center;
        text-transform: uppercase;
      }

Dưới đây là đoạn mã Javascript

function kiemtra() {
        var name = $("#name").val();
        if (name == "" || name == null) {
          alert("Bạn chưa nhập tên");
          return; //Thoát ra khỏi hàm từ đây và không thực hiện lệnh sau đó
        }
        var email = $("#email").val();
        if (email == "" || email == null) {
          alert("Bạn chưa nhập email");
          return;
        }
      }

Hướng dẫn tạo trang hoàn chỉnh