[HTML] Bài tập 01. Thiết kế Form đăng ký theo mẫu.

administrator

administrator

Administrator
Staff member
Bài tập 01. Thiết kế FORM đăng ký bằng HTML.​

HTML (HyperText Markup Language) Là thành phần đầu tiên và quan trọng nhất trong việc thiết kế website, Là những thứ cơ bản nhất để tạo nên 1 website. Các bạn thử click chuột phải lên diễn đàn và chọ View Source (hoặc nếu tiếng việt là Xem mã nguồn) đó chính là HTML.

Tài liệu về nó thì có rất nhiều, nếu bạn muốn học làm web thì bạn ko thể ko biết ngôn ngữ HTML, nó là cái cơ bản và bắt buộc.
Không cần quá thông minh nhưng cần chăm để học câu lệnh.

Mình up thử 1 bài để các bạn tập viết code nhé. Nếu viết ổn rồi thì sau đó chúng ta sẽ thử với CSS. Rồi mình sẽ trình bày thử PHP .

Đây là những bài tập mình cũng mới đc học thôi, mình sẽ share chúng lên diễn đàn để mọi ng cùng học hỏi lẫn nhau.

bai1z.png

​

Trên diễn đàn, các bạn post code lên thì để trong thẻ CODE nhé ~_~
 
administrator

administrator

Administrator
Staff member
Đáp án:
Mã: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BT 1</title>

</head>

<body>
Lưu ý: <br />
Vui lòng nhập đầy đủ thông tin<br />
<hr />
<form onSubmit="return kt();" id="dangky" action="" method="post">
  <table width="621" border="0" align="center">
    <tr>
      <td width="160">T&ecirc;n đăng nhập </td>
      <td width="445"><input name="textfield" id="tenID" type="text" size="50" maxlength="25" /><font color="#FF0000"><strong>*</strong></strong></font>      </td>
    </tr>
    <tr>
      <td>Mật khẩu </td>
      <td><input name="textfield2" type="password" id="passID1" size="50"/>
      <font color="#FF0000"><strong>*</strong></strong></font>      
      </td>
    </tr>
    <tr>
      <td>Nhắc lại mật khẩu </td>
      <td><input name="textfield3" type="password" id="passID2"size="50" />
      <font color="#FF0000"><strong>*</strong></strong></font>      
      </td>
    </tr>
 </table>
   <table width="621" border="0" align="center">
   <hr / width="800px">
  <table width="621" border="0" align="center">
    <tr>
      <td>Tên Công ty</td>
      <td><input type="text" name="textfield3" id="ctID" size="50" /><font color="#FF0000"><strong>*</strong></strong></font>      
	  </td>
    </tr>
    <tr>
      <td>Địa chỉ công ty:</td>
      <td><input type="text" name="textfield3" id="dcID" size="50" /><font color="#FF0000"><strong>*</strong></strong></font>      
	  </td>
    </tr>
    <tr>
      <td>Điện thoại</td>
      <td><input name="textfield3" type="text" id="dtID" size="35"  maxlength="11"/>
      <font color="#FF0000"><strong>*</strong></strong></font>      </td>
    </tr>
    <tr>
      <td > Ngành kinh doanh</td>
      <td><textarea name="nganhkd"  cols="38" rows="5"  ></textarea></td>
    </tr>
  </table>
	  <table width="621" border="0" align="center">
	  <hr / width="800px">
    <tr>
      <td width="161">Tên người liên hệ</td>
      <td width="450"><input type="text" name="textfield3" id="tenlhID" onBlur="validateFirstName()" size="35" maxlength="25"/><font color="#FF0000"><strong>*</strong></strong></font>     </td>
    </tr>
    <tr>
      <td>Chức vụ</td>
      <td><input type="text" name="textfield3" size="35" /></td>
    </tr>
    <tr>
      <td>Địa chỉ Email</td>
      <td><input type="text" name="textfield3" id="mailID" size="35"/><font color="#FF0000"><strong>*</strong></strong></font>      </td>
    </tr>
    <tr>
      <td>Điện thoại</td>
      <td><input name="textfield3" type="text" size="35"/ maxlength="11" /></td>
    </tr>
	<tr><td align="center" colspan="2"><input name="dangky" type="submit" value="Ok" /> 	    <input name="kodangky" type="reset" value="Không đăng ký" /></td></tr>
  </table>
</form>
</body>
</html>

Chỉ có 3 lệnh trong đó thôi table , tr và td b-)
 
Tít xù

Tít xù

Never Give Up
ớ.......cái này.............
 
bsbdonganh

bsbdonganh

Manager TTDA
caotu đã viết:
Đáp án:
Mã: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BT 1</title>

</head>

<body>
Lưu ý: <br />
Vui lòng nhập đầy đủ thông tin<br />
<hr />
<form onSubmit="return kt();" id="dangky" action="" method="post">
  <table width="621" border="0" align="center">
    <tr>
      <td width="160">Tên đăng nhập </td>
      <td width="445"><input name="textfield" id="tenID" type="text" size="50" maxlength="25" /><font color="#FF0000"><strong>*</strong></strong></font>      </td>
    </tr>
    <tr>
      <td>Mật khẩu </td>
      <td><input name="textfield2" type="password" id="passID1" size="50"/>
      <font color="#FF0000"><strong>*</strong></strong></font>      
      </td>
    </tr>
    <tr>
      <td>Nhắc lại mật khẩu </td>
      <td><input name="textfield3" type="password" id="passID2"size="50" />
      <font color="#FF0000"><strong>*</strong></strong></font>      
      </td>
    </tr>
 </table>
   <table width="621" border="0" align="center">
   <hr / width="800px">
  <table width="621" border="0" align="center">
    <tr>
      <td>Tên Công ty</td>
      <td><input type="text" name="textfield3" id="ctID" size="50" /><font color="#FF0000"><strong>*</strong></strong></font>      
	  </td>
    </tr>
    <tr>
      <td>Địa chỉ công ty:</td>
      <td><input type="text" name="textfield3" id="dcID" size="50" /><font color="#FF0000"><strong>*</strong></strong></font>      
	  </td>
    </tr>
    <tr>
      <td>Điện thoại</td>
      <td><input name="textfield3" type="text" id="dtID" size="35"  maxlength="11"/>
      <font color="#FF0000"><strong>*</strong></strong></font>      </td>
    </tr>
    <tr>
      <td > Ngành kinh doanh</td>
      <td><textarea name="nganhkd"  cols="38" rows="5"  ></textarea></td>
    </tr>
  </table>
	  <table width="621" border="0" align="center">
	  <hr / width="800px">
    <tr>
      <td width="161">Tên người liên hệ</td>
      <td width="450"><input type="text" name="textfield3" id="tenlhID" onBlur="validateFirstName()" size="35" maxlength="25"/><font color="#FF0000"><strong>*</strong></strong></font>     </td>
    </tr>
    <tr>
      <td>Chức vụ</td>
      <td><input type="text" name="textfield3" size="35" /></td>
    </tr>
    <tr>
      <td>Địa chỉ Email</td>
      <td><input type="text" name="textfield3" id="mailID" size="35"/><font color="#FF0000"><strong>*</strong></strong></font>      </td>
    </tr>
    <tr>
      <td>Điện thoại</td>
      <td><input name="textfield3" type="text" size="35"/ maxlength="11" /></td>
    </tr>
	<tr><td align="center" colspan="2"><input name="dangky" type="submit" value="Ok" /> 	    <input name="kodangky" type="reset" value="Không đăng ký" /></td></tr>
  </table>
</form>
</body>
</html>

Chỉ có 3 lệnh trong đó thôi table , tr và td b-)
Nhấn để mở rộng...

hoooo đã khớp lệnh với bài của mình :D:D:D:D
 
Sơn Nguyễn

Sơn Nguyễn

♥ Forever Alone ♥
Staff member
Bài của em :D ngồi buồn buồn gõ chơi không biết đúng ko.


Mã: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Son Sieu Nhan" /><ins></ins>
    <meta name="keyword" content="Tuoi tre dong anh"/>
	<title>Register Form</title>
</head>

<body>
<center><font size="+5"><b></b>Register FORM Design by HTML </b></font></center><br /><br />

<form onsubmit="return" id="register" method="post" >
    <!-- User, pw, retype pw -->
    <table width="500" align="center">
    <hr width="500"/>
        <tr>
            <td width="200">Username</td>
            <td width="200"><input name="field1" id="user" /> <font color="red"><b>*</b></font></td>
        </tr>
        
        <tr>
            <td width="200">Password</td>
            <td width="200"><input name="field2" id="pw" type="password" size="21" /> <font color="red"><b>*</b></font></td>
        </tr>
        
        <tr>
            <td>Retype Password</td>
            <td width="200"><input name="field3" id="rpw" type="password" size="21"/> <font color="red"><b>*</b></font></td>
        </tr>
    </table>
    
    <!-- Company, Address, Tel, About -->
    <table width="500" align="center">
    <hr width="500" />
    <tr>
        <td width="200">Company</td>
        <td width="200"><input name="field4" id="company"/><font color="red"><b>*</b></font></td>
    </tr>
    <tr>
        <td width="200">Adress</td>
        <td width="200"><input name="field5" id="adress" /><font color="red"><b>*</b></font></td>
    </tr>
    <tr>
        <td>Tel Number</td>
        <td width="200"><input name="field6" id="tel" /><font color="red"><b>*</b></font></td>
    </tr>
    <tr>
        <td width="200">About</td>
        <td width="200"><textarea></textarea></td>
    </tr>
    </table>
    
    <!--Full name,position, email, tel -->
    <table width="500" align="center">
    <hr width="500"/>
        <tr>
            <td width="200">Full name</td>
            <td width="200"><input name="field7" id="name" /><font color="red"><b>*</b></font></td>
        </tr>
        <tr>
            <td width="200">Position</td>
            <td  width="200"><input name="field8" id="position" /><font color="red"><b>*</b></font></td>
        </tr>
        <tr>
            <td width="200">Email</td>
            <td width="200"><input name="field9" id="email" value="@gmail.com" /><font color="red"><b>*</b></font></td>
        </tr>
        <tr>
        <td>Tel Number</td>
        <td width="200"><input name="field10" id="ctel" /><font color="red"><b>*</b></font></td>
        </tr>
    </table>
    <hr width="500" />
    <table width="500" align="center">
    <input type="submit"/>
    <input type="reset"/>
    </table>
</form>
    

</body>
</html>

Anh caotu chuẩn bị cho bài 2 đi :D e thích món này lắm
 
administrator

administrator

Administrator
Staff member
Baif vậy là đạt yêu cầu, tuy nhiên nếu có mẫu thì phải làm cố gắng giống mẫu để phù hợp vs khách hàng yêu cầu :D.

Góp ý với em chú ý một số thứ:
1-Chaset nên để utf-8 ngay từ đầu để gõ tiếng việt.
2-Lệnh td width=200 thừa ng ta thường ko sử dụng nó điểu đó, có nhiều cách để căn. dùng css hoặc chú ý có thẻ align.
3- Chắc em học Java rồi nên mới thêm thuộc tính id cho nó, thế cũng rất tốt.

Vậy là đã khá ổn rồi ^^*.
 
Sơn Nguyễn

Sơn Nguyễn

♥ Forever Alone ♥
Staff member
Trời em có học hành gì đâu :| đọc qua một số bài thôi. Em dùng phpDes nên câu cú nó đều có gợi ý mà ;))
 
Bạn phải đăng nhập hoặc đăng ký để phản hồi tại đây.
Bên trên