Hướng dẫn tạo form đăng ký trong html và css năm 2024

Question

Hôm nay mình xin hướng dẫn tạo form đăng ki thành viên, trong form này các bạn cũng gập nhiều ở những trang web khác,các làm cũng đơn giãn ,nhưng cũng hơi khó nhé.

Code css

{ margin: 0px; padding: 0px; } body { background: url(../img/fancy_shadow_ne.png); background-size: 7px; }

nen {

widht: 900px; margin: 0px auto; }

img {

width: 900px; margin: 0px auto; }

dk {

margin: 0px auto; width: 900px; border: 1px solid

ccc;

background: white; } td { padding: 5px 0px; }

nd {

margin: 0px 150px; width: 900px; } label { margin: 0px 30px; color:

000020;

font-size: 20px; font-family: serif; } .input1 { padding: 5px 30px; font-family: serif; font-size: 20px; margin-left: 40px; } span { color:

F60;

} .nut { width: 100px; padding: 6px 3px; font-size: 18px; } p.xacnhanten { margin-left: 40px; width: 200px; color:

F60;

font-size: 17px; }

hide {

display: none }

load {

display: inline-block; }

Bạn tạo file dangky.php và copy doạn code bên dười vào và bạn tạo file thongtindeukhoan.php(trong file này các bạn chứa các đều khoản khi đăng ký nhe) để jquery load file này vào khung thông tin điều khoản

Code html

<div id="nen">  
  <div id="img">  
    <img src="img-login1.png" widht="900" height="200"/></em>  
    <em>  
  </div>  
  <div id="dk">  
    <div id="nd">  
      <table width="900px">  
        <tr>  
          <div class="tt">  
            <td widht="200"><label for="nn">Họ Tên (<span style="kihieu">*</span>)</label></td>  
            <td width="400" ><input type="text" name="hoten" class="input1"/>  
          </div>  
          </td>  
    </div>  
    </tr>  
    <tr>  
    <div class="tt">  
    <td widht="200"><label for="nn">Tên Đăng Nhập (<span style="kihieu">*</span>) </label></td>  
    <td width="400" ><input type="text" name="tdn" class="input1"/></div>  
    <!--<p class="xacnhanten">Ten dang nhap da ton ta.</p>-->  
    </td>  
  </div>  
  </tr>  
  <tr>  
  <div class="tt">  
  <td widht="200"><label for="nn">Mật Khẩu (<span style="kihieu">*</span>) </label></td>  
  <td width="400" ><input type="password" name="mk" class="input1"/></div></td>  
</div>  
</tr>  
<tr>  
<div class="tt">  
<td width="200" ><label for="nn">Xác nhận mật khẩu (<span style="kihieu">*</span>)</label></td>  
<td width="400" ><input type="password" name="xnmk" class="input1"/></div>  
<!-- <p class="xacnhanten">Ten dang nhap da ton ta.</p>-->  
</td>  
</div>  
</tr>  
<tr>  
<div class="tt">  
<td width="200" ><label for="nn">Giới Tính: </label></td>  
<td width="400" ><span style="font-size:20px;color:

# 000;margin-left:36px;padding:5px 5px;"><input type="radio" name="gioitinh" value="1" checked="checked"/>Nam

<input type="radio" name="gioitinh" value="0" />Nu</span>  
</td>  
</div>  
</tr>  
<tr>  
<div class="tt">  
<td width="200" ><label for="nn">Email: </label></td>  
<td width="400" ><input type="text" name="email" class="input1"/></td>  
</div>  
</tr>  
<tr>  
<div class="tt">  
<td width="200" ><label for="nn">Địa Chỉ </label></td>  
<td width="400" ><textarea name="diachi" style="font-size: 20px; color: rgb(0, 0, 0); margin-left: 38px; padding: 5px; width: 250px; height: 54px;font-family: serif"></textarea></td>  
</div>  
</tr>  
<tr>  
<div class="tt">  
<td width="200" ><label for="nn">Thông Tin Điều Khoản</label></td>  
<td width="400" ><div id="hide">  
<input type="button" value="Hide" class="hide" style="font-size:15px;color:

# 000;margin-left:36px;padding:2px 0px;"/>

<input type="button" value="Show" class="show" style="font-size:15px;color:

# 000;padding:2px 0px;"/>

</div>  
<div id="tt-dkhoan">  
<input type="button" id="dieukhoan" value="Đọc điêu khoản" style="font-size:15px;color:

# 000;margin-left:36px;padding:2px 2px;"/></br>

</div>  
<span style="font-size:20px;color:

# 000;margin-left:36px;padding:5px 5px;"><input type="checkbox" value="xacnhan_dk" name="xacnhan_dieukhoan" />Tôi chấp nhận điều khoản.</span>

</td>  
</div>  
</tr>  
<tr>  
<div class="tt">  
<td colspan="2" align="center"><input type="submit" name="xn" class="nut" value="Đăng Ký">  
<input type="reset" name="huy" class="nut" value="Hủy"/></td>  
</div>  
</tr>  
</table>  
</div>  
</div><!--ket thuc dk-->  
</div><!---ket thuc nen-->

</form> </body>

Bạn include thu viện jquery vào nhe() và copy đoạn code bên dưới vào để sữ dụng jquery

$(document).ready(function() {

$('

# dieukhoan').click(function() {

    var url = "thongtindeukhoan.php";  
    $("

# tt-dkhoan").load(url).slideDown('slow');

    //$("

# tt-dkhoan").load(url);

$('

# hide').css('display', 'block');

$('

# hide input').click(function() {

$("

# tt-dkhoan").slideUp('slow');

    });  
    $("

# hide input.show").click(function() {

$("

# tt-dkhoan").slideDown('slow');

    });  
});

});

code SQL

CREATE TABLE IF NOT EXISTS thanhvien (ID_THANHVIEN int(11) NOT NULL AUTO_INCREMENT, HOTEN varchar(30) COLLATE utf8_unicode_ci NOT NULL, TENDANGNHAP varchar(50) COLLATE utf8_unicode_ci NOT NULL, MATKHAU varchar(100) COLLATE utf8_unicode_ci NOT NULL, GIOITINH` tinyint(1) NOT NULL, DIACHI text COLLATE utf8_unicode_ci NOT NULL, EMAIL` varchar(50) COLLATE utf8_unicode_ci NOT NULL, QUYEN_HAN int(1) NOT NULL, PRIMARY KEY (ID_THANHVIEN)) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=

Các bạn tạo file db.php và include vào file xulydangky.php để kết nối tới localhost chứa database của các bạn

hướng dẫn Mẹo Hay CSS form W3school Bootstrap 5 W3school HTML HTML online