You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Tạo Form đăng nhập và những lưu ý khi tạo một Form trong HTML

Tạo Form đăng nhập và những lưu ý khi tạo một Form trong HTML

Cùng tìm hiểu về cách tạo ra một Form đăng nhập.

Xem thêm bài viết

Chúng ta đã có đầy đủ vũ khí để tạo ra một Form theo cách hoàn hảo nhất, Bạn cũng đã được  học về thẻ Form trong HTML. Bây giờ chúng ta sẽ tiến hành tạo ra một Form đầu tiên trong khoá học này.

Form mà mình muốn giới thiệu đến các bạn chính là Form đăng nhập. Form này bao gồm hai control chính là Textbox và Password. Ngoài ra chúng ta sẽ còn có control Submit. Bạn chắc đã thường nhìn thấy loại này ở nhiều nơi lắm rồi đúng không? Từ Facebook, Gmail đến những tài khoản chơi game đều có khung Form này. Chúng ta sẽ học khung Form này ngay thôi.

Control Textbox

Đây chính là một loại control đơn giản và bạn sẽ không gặp phải bất kỳ khó khăn nào trong quá trình bạn thực hiện việc tạo ra control Textbox. Control này chỉ tạo ra những ô nhập liệu để người dùng có thể nhập liệu thông tin ngoài ra không còn bất kỳ công dụng nào nữa.

Control Password

Một Control không bao giờ được thiếu trong quá trình tạo Form. Bạn sẽ có cảm giác gì nếu bạn không thể đăng nhập vào tài khoản mà mình muốn. Chắc chắn là cảm giác khó chịu sẽ vây quanh bạn. Password chính là một loại control mà bạn không bao giờ được thiếu trong việc tạo Form.

Control Submit

Có ngoại hình hơi giống Button nhưng công dụng thì khác nhau hoàn toàn. Sau khi bạn nhập xong tất cả các ô bạn phải nhấn Submit. Bạn thắc mắc là nhấn để làm gì phải không? Câu trả lời cực kỳ đơn giản. Submit dùng để xác nhận rằng bạn đồng ý gửi toàn bộ thông tin đã nhập trên Form cho Website xử lý. Còn một ý nghĩa bổ sung nữa chính là bạn đã đồng ý với những gì nhập ở trên Form. Tức là mọi thông tin bạn đăng nhập đều đúng với những gì mà bạn đã nhập.

Cú pháp tạo Form đăng nhập

<form name= “…” action= “ ” get= “…”>

            <input type= “textbox” name= “…”/>

            <input type= “password” name= “…”/>

            <input type= “submit” name= “…”/>

</form>

 

Nếu bạn muốn tạo Textbox thì bạn chỉ cần nhập vào Type là kiểu Textbox. Chúng ta sẽ làm tương tự dành cho các thẻ Input khác. Phần Action của Form chúng ta sẽ tạm thời bỏ qua. Về phần Name thì bạn phải đặt tên khác biệt cho chúng thì chúng mới hoạt động được. Còn nếu không thì bạn sẽ là người gặp rắc rối với Form.

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        <h1>Chào mừng bạn đến với trang liên hệ</h1>
        <p>Hãy liên hệ với chúng tôi để có thêm nhiều thông tin thú vị về ẩm thực Việt Nam. Chúng tôi sẵn sàng tư vấn miễn phí cho bạn những quán ăn  ngon-bổ-rẻ. Hãy điền vào form bên trái nếu bạn muốn tư vấn và điền vào form bên phải để liên hệ với chúng tôi thực hiện những yêu cầu khác.</p>
        <form name="form1" action=" " method="get">
            <input type="text" name="Ho"/>
            <input type="text" name="Ten"/>
        </form>
        <br/>
        
        <form name="form2" action=" " method="get">
            <input type="textbox" name="TDnhap"/>
            <input type="password" name="Pwsd1"/>
            <input type="submit" name="Sbm1"/>
        </form>
        
    </body>

 Kết quả ví dụ

Tạm thời bạn sẽ chưa thấy Form đẹp cho lắm. Trông chúng khá cổ lỗ. Nhưng đừng lo lắng chuyện đó vì chúng ta sẽ trang trí cho chúng dựa vào thẻ Style hoặc là làm bằng CSS chúng sẽ độc đáo hơn. Tạm thời bạn cũng đừng quá lo lắng về thuộc tính Action của thẻ Form. Sau khi học xong phần PHP bạn sẽ biết mình cần phải ghi gì vào đó mà thôi.

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        <h1>Chào mừng bạn đến với trang liên hệ</h1>
        <p>Hãy liên hệ với chúng tôi để có thêm nhiều thông tin thú vị về ẩm thực Việt Nam. Chúng tôi sẵn sàng tư vấn miễn phí cho bạn những quán ăn  ngon-bổ-rẻ. Hãy điền vào form bên trái nếu bạn muốn tư vấn và điền vào form bên phải để liên hệ với chúng tôi thực hiện những yêu cầu khác.</p>
        <form name="form1" action=" " method="get">
            <input type="text" name="Ho"/>
            <input type="text" name="Ten"/>
        </form>
        <br/>
        
        <form name="form2" action= " " method="get">
            <input type="textbox" name="TDnhap"/>
            <input type="password" name="Pwsd1"/>
            <input type="submit" name="Sbm1"/>
        </form>
        <form name="form3" action=" " method="get">
            <input type="email" name="EMl1"/>
            <input type="tel" name="Tl1"/>
            <input type="submit" name="Sbm2"/>
        </form>
    </body>

 Kết quả ví dụ

Bạn cố gắng đặt mỗi thẻ Input một tên khác nhau. Nhưng có thể chung một số ký tự đầu cho dễ quản lý. Khi bạn nhìn vào những name này bạn sẽ nhớ ra là công dụng của chúng là gì mà không cần phải ghi nhớ quá nhiều.

Bạn đã biết cách tạo ra một Form đúng cách. Chúng ta đã hoàn thành phần tạo Form đăng nhập tương đối là hoàn hảo. Bây giờ là lúc bạn cần phải có một chút bài tập trong phần này. Chúc bạn học vui!    




Đặt câu hỏi cho bài viết này ?