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

#1

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 ?

#2

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

#3

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

#4

Mình nghĩ table vẫn là lựa chọn tuyệt vời :smile:.
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>
#5

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

#6

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

#7

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>
#8

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

1 Like
#9

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

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?