Tạo Form Đăng Nhập HTML

5

/

5

(

1

bình chọn

)

Form biểu mẫu rất đa dạng trên website khi bạn muốn thu thập một số dữ liệu từ khách hàng hoặc người dùng như thông tin, tên, số điện thoại. Sau đây hãy cùng VDO Software đi tìm hiều về cách tạo form đăng nhập HTML như thế nào nhé

HTML Form là gì?

HTML Form là tài liệu lưu trữ thông tin của người dùng trên máy chủ web bằng cách người dùng nhập liệu vào form. HTML Form chứa các loại thông tin khác nhau như tên người dùng, mật khẩu, số liên lạc, id email, v.v.

Các phần tử được sử dụng trong biểu mẫu HTML là hộp kiểm, hộp nhập, các nút radio, nút gửi, v.v. Sử dụng các phần tử này là thông tin của người dùng được gửi trên một máy chủ web.

Các hình thức thẻ được sử dụng để tạo ra một hình thức HTML.

Ví dụ tạo form đăng nhập HTML

tao-form-dang-nhap-html

 

Cách tạo form đăng nhập HTML cho các phần tử đầu vào

Phần tử đầu vào là phần tử phổ biến nhất được sử dụng trong HTML Forms. Có thể tạo các trường nhập liệu khác nhau của người dùng như trường văn bản, hộp kiểm, trường mật khẩu, nút radio, nút gửi, v.v. Các phần tử đầu vào phổ biến nhất được liệt kê dưới đây:

Tạo trường văn bản trong form đăng nhập HTML

Trường văn bản là trường nhập một dòng cho phép người dùng nhập văn bản. Các điều khiển nhập Trường văn bản được tạo bằng cách sử dụng phần tử “đầu vào” với thuộc tính kiểu có giá trị là “văn bản”.

<!DOCTYPE html>

<html>

<h3>Example Of Text Field</h3>

<body>

    <form>

        <label for="EMAIL ID">Email Id:</label><br>

        <input type="text" name="Email id" id="Email id">

    </form>

</body>

</html>

Tạo trường mật khẩu cho Form  HTML

Mật khẩu là một loại trường văn bản trong đó văn bản được nhập được che bằng dấu hoa thị hoặc dấu chấm để ngăn chặn nhận dạng người dùng từ một người khác đang nhìn vào màn hình. Các điều khiển nhập Trường mật khẩu được tạo bằng cách sử dụng phần tử “đầu vào” với thuộc tính kiểu có giá trị là “mật khẩu”.

<!DOCTYPE html>

<html>

<h3>Example of Password Field</h3>    

<body>

    <form>

        <label for="user-password">Password:

        </label><br>

        <input type="password" name="user-pwd"

                            id="user-password">

    </form>

</body>

</html>

 

Tạo các nút Radio trong Form  HTML

Các Nút Radio được sử dụng để cho phép người dùng chọn chính xác một tùy chọn từ danh sách các tùy chọn được xác định trước. Các điều khiển đầu vào của Nút radio được tạo bằng cách sử dụng phần tử “input” với thuộc tính type có giá trị là “radio”.

<!DOCTYPE html>

<html>

<h3>Example of Radio Buttons</h3>

<body>

    <form>

        SELECT GENDER

        <br>

        <input type="radio" name="gender" id="male">

        <label for="male">Male</label><br>

        <input type="radio" name="gender" id="female">

        <label for="female">Female</label>

    </form>

</body>

</html>

 Tạo hộp kiểm trong Form HTML

Hộp kiểm được sử dụng để cho phép người dùng chọn một hoặc nhiều tùy chọn từ một nhóm tùy chọn được xác định trước. Các điều khiển đầu vào hộp kiểm được tạo bằng cách sử dụng phần tử “đầu vào” có thuộc tính loại có giá trị là “hộp kiểm”.

<!DOCTYPE html>

<html>

<h3>Example of HTML Checkboxes</h3>

<body>

    <form>

        <b>SELECT SUBJECTS</b>

        <br>

        <input type="checkbox" name="subject" id="maths">

        <label for="maths">Maths</label>

        <input type="checkbox" name="subject" id="science">

        <label for="sceince">Science</label>

        <input type="checkbox" name="subject" id="english">

        <label for="english">English</label>

    </form>

</body>

</html>

Các hộp chọn tệp trong form HTML

Các hộp chọn tệp được sử dụng để cho phép người dùng chọn một tệp cục bộ và gửi nó dưới dạng tệp đính kèm tới máy chủ web. Nó tương tự như một hộp văn bản có nút cho phép người dùng duyệt tìm tệp. Thay vì duyệt tìm tệp tệp, đường dẫn và tên của tệp cũng có thể được viết. Các hộp chọn tệp được tạo bằng phần tử “input” với thuộc tính type có giá trị là “tệp”.

<!DOCTYPE html>

<html>

<h3>Example of a File Select Box</3

    <body>

    <form>

        <label for="fileselect">Upload:</label>

        <input type="file" name="upload" id="fileselect">

    </form>

</body>

</html>

Vùng văn bản trong Form HTML

Vùng Văn bản là một điều khiển nhập văn bản nhiều dòng cho phép người dùng cung cấp mô tả hoặc văn bản trong nhiều dòng. Điều khiển đầu vào Vùng văn bản được tạo bằng phần tử “vùng văn bản”.

<!DOCTYPE html>

<html>

<h3>Example of a Text Area Box</h3

<body>

    <form>

        <label for="Description">Description:</label>

        <textarea rows="5" cols="50" name="Description"

                            id="Description"></textarea>

    </form>

</body>

</html>

Chọn hộp trong form HTML

Hộp chọn được sử dụng để cho phép người dùng chọn một hoặc nhiều tùy chọn từ danh sách tùy chọn kéo xuống. Các hộp chọn được tạo bằng hai phần tử là “select” và “option”. Các mục trong danh sách được xác định trong phần tử select.

<!DOCTYPE html>

<html>

<h3>Example of a Select Box</h3

<body>

    <form>

        <label for="country">Country:</label>

        <select name="country" id="country">

            <option value="India">India</option>

            <option value="Sri Lanka">Sri Lanka</option>

            <option value="Australia">Australia</option>

        </select>

    </form>

</body>

</html>

Đặt lại và gửi các nút

Nút gửi cho phép người dùng gửi dữ liệu biểu mẫu đến máy chủ. Nút dặt lại được sử dụng để đặt lại dữ liệu biểu mẫu và sử dụng các giá trị mặc định.

<!DOCTYPE html>

<html>

<h3>Example of a Submit And Reset Button</h3

<body>

    <form action="test.php" method="post" id="users">

        <label for="username">Username:</label>

        <input type="text" name="username" id="Username">

        <input type="submit" value="Submit">

        <input type="reset" value="Reset">

    </form>

</body>

</html>

Các thuộc tính được trong Form HTML

Thuộc tính hành động

Hành động được thực hiện sau khi gửi biểu mẫu được quyết định bởi thuộc tính hành động. Nói chung, dữ liệu biểu mẫu được gửi đến một trang web trên máy chủ web sau khi người dùng nhấp vào nút gửi.

Ví dụ

<!DOCTYPE html>

<html>

<h3>Example of a Submit And Reset Button</h3

<body>

    <form action="test.php" method="post" id="users">

        <label for="username">Username:</label>

        <input type="text" name="username" id="Username">

        <input type="submit" value="Submit">

        <input type="reset" value="Reset">

    </form>

</body>

</html>

Thuộc tính target trong HTML Forms

Thuộc tính Target được sử dụng để chỉ định xem kết quả đã gửi sẽ mở trong cửa sổ hiện tại, tab mới hay trên khung mới. Giá trị mặc định được sử dụng là “self” dẫn đến việc gửi biểu mẫu trong cùng một cửa sổ. Để mở kết quả biểu mẫu trong tab trình duyệt mới, giá trị phải được đặt thành “trống”.

<!DOCTYPE html>

<html>

<body>

 

<form action="/test.php" target="_blank">

  Username:<br>

  <input type="text" name="username">

  <br>

  Password:<br>

  <input type="password" name="password">

  <br><br>

  <input type="submit" value="Submit">

</form

 

</body>

</html>

Thuộc tính tên trong Form Html

Thuộc tính tên là bắt buộc cho mỗi trường đầu vào. Nếu thuộc tính name không được chỉ định trong trường đầu vào thì dữ liệu của trường đó sẽ không được gửi đi.

<!DOCTYPE html>

<html>

<body>

 

<form action="/test.php" target="_blank">

  Username:<br>

  <input type="text">

  <br>

  Password:<br>

  <input type="password" name="password">

  <br><br>

  <input type="submit" value="Submit">

</form

 

</body>

</html>

Vừa rồi các bạn đã tìm hiểu cách tạo form đăng nhâp HTML hoàn chỉnh. Hi vọng các bạn đã có được những thông tin bổ ích. Chúc các bạn một ngày tốt lành.