01/10/2018, 10:17

Giúp mình vài thứ linh tinh về web?

Mình có cái form như thế, giờ làm sao để làm cho cái khung input nó ngang bằng nhau đc. Cách nào để sau này có thể add thêm password,… vần giữ đc vị trị ngang bằng và email, user,password, password confirm,… nó không đẩy khung input ra xa khi kí tự dài ?

Henry viết 12:19 ngày 01/10/2018

Bạn tìm hiểu table đi. Nó căn chuẩn từng mi li mớt

Hoàng Ngô viết 12:22 ngày 01/10/2018

để mình thử xem sao mà hình như k cần dùng table thì phải

Henry viết 12:29 ngày 01/10/2018

Mình nghĩ table vẫn là lựa chọn tuyệt vời .
Nếu bạn làm để cho công việc thì mình nghĩ là table là phù hợp
còn nếu bạn làm để nâng cao tay code thì hm… Bạn tham khảo mẫu này xem sao

<html>
<head>
    <title>Example form</title>
    <style type="text/css">
    .container {
        width: 500px;
        clear: both;
    }
    .container input {
        width: 100%;
        clear: both;
    }

    </style>
</head>
<body>
<div class="container">
<form>
 <label>First Name</label>
 <input type="text" name="first"><br />
 <label>Last Name</label>
 <input type="text" name="last"><br />
 <label>Email</label>
 <input type="text" name="email"><br />
</form>
</div>
</body>
</html>

Hoàng Ngô viết 12:25 ngày 01/10/2018

oh, để mình paste xuống coi thử xem sao

viết 12:27 ngày 01/10/2018

Cái này thuộc về CSS, google học thêm về CSS, hoặc dùng bootstrap.

Ngô Quang Dương viết 12:33 ngày 01/10/2018

Dùng table cũng được. Form của facebook cũng dùng table.
Nếu không dùng bảng thì dùng grid system của bootstrap là tốt nhất, bạn tham khảo thử code này nhé. Dùng bootstrap trông cũng như bảng thôi nhưng vì có grid system nên nó linh hoạt hơn. Mà thực tế cũng rất hạn chế dùng table. Các class sau đều là của bootstrap

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <label>Username</label>
        </div>
        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
            <input type="text" class="form-control" />
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <label>Pass</label>
        </div>
        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
            <input type="password" class="form-control" />
        </div>
    </div>
</div>

Đào An viết 12:18 ngày 01/10/2018

Dùng flex-box nha bạn https://webdesign.tutsplus.com/vi/tutorials/building-responsive-forms-with-flexbox--cms-26767
Từ khi biết flex-box ko còn đụng vaò bootstrap nữa

Hoàng Ngô viết 12:23 ngày 01/10/2018

thanks all các bác, mình xài thẻ

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Hoàng Ngô

0 chủ đề

0 bài viết

Tác giả nổi bật