1. Kết quả Event Ghost 2016


    Dưới đây là danh sách những thành viên đoạt giải thưởng trong Event Ghost 2016

[HELP] Sửa code Form trong HTML

Thảo luận trong 'HTMl , CSS , Javascript' bắt đầu bởi Alfred Seattle, 30 Tháng ba 2012.


  1. Alfred Seattle

    Alfred Seattle Member Chính Thức

    27
    21
    3
    Các anh chị xem cái đoạn code của em nhé
    HTML:
    <form aciton="">
            <ul type="none">
                <li>
                    <label for="firstname"><span>First Name</span></label>
                    <input id="firstname" type="text" name="fristname" size="30" />
                </li>
                <li>
                    <label for="lastname"><span>Lastname</span></label>
                    <input type="text" id="lastname" name="lastname" size="30" />
                </li>
                <li>
                    <label for="email"><span>Email</span></label>
                    <input name="email" id="email" type="text" size="30"/>
                </li>
                <li>
                    <label for="password"><span>Password</span></label>
                    <input name="password" id="password" type="password" size="30" />
                </li>
                <li id="checkbox">
                    <label><span>What do you want from this forum?</span></label>
                        <input name="op1" type="checkbox"checked/>
                        <label>Know how to use Photoshop</label>
                             
                        <input name="op2" type="checkbox"/>
                        <label>Know how to use AutoCAD</label>
                                       
                        <input name="op3" type="checkbox"/>
                        <label>Know how to use Autodesk 3Ds Max</label>
                                        
                        <input name="op4" type="checkbox"/>
                        <label>Know how design a Website</label>
                                          
                        <input name="op5" type="checkbox"/>
                        <label>Other...</label>
                    
                </li>
                <li>
                    <label>What pet do you like?</label>
                    <input name="pet" type="radio" checked/>      Cat
                    <input name="pet" type="radio"/>              Dog
                    <input name="pet" type="radio"/>              Both
                </li>
                <li>
                    <label>Avantar</label>
                        <input id="fcomputer" type="radio" name="fcavantar" checked/>
                        <label for="fcomputer">Upload from your computer
                            <input type="file" name="file1"/>
                        </label>
                    
                    
                        <input id="foweb" type="radio" name="fcavantar"/>
                        <label for="foweb">Load from another web
                            <input type="file" name="file2"/>
                        </label>
                    
                </li>
                <li>
                    <label><span>Comment</span></label>
                    <textarea rows="10" cols="50">Type Here...</textarea>
                </li>
    
            </ul>
    
        </form>
    
    
    Nó sẽ được hiện thế này
    [​IMG]

    Bây giờ em muốn các option trong "What do you want from this forum?" nó xuống dòng mà không ở trong cùng một hàng thì em cho thêm đoạn CSS:
    Mã:
    #checkbox input {
    display: block;
    }
    
    Nhưng nó lại cho xuất hiện hộp checkbox ở trên, rồi label ở dưới như thế này
    [​IMG]

    Em cũng có cách là cho cả thẻ input và checkbox của từng option vào 1 thẻ div, nhưng thầy giáo em lại bảo không được dùng nhiều div. Vậy anh chị có cách nào để không cần cho vào thẻ div mà vẫn được không?
    P/s:
    Còn 1 vấn đề nữa:
    Lượn qua web izwebz.com thấy cái form như thế này:
    [​IMG]
    Sau khi thêm code CSS:
    Mã:
    span {
                display: block;
                background: red;
                border-radius: 5px 5px 0 0;
            }
    
    Kết quả:
    [​IMG]
    Vậy làm sao để khắc phục lỗi như vậy?
    Chẳng nhẽ mỗi span lại phải cố định thêm cái width???
    Em gà xin các anh chỉ bảo với!
     
  2. xdhcda

    xdhcda Moderator

    1,254
    551
    113
    Đúng rồi. không lên lạm dụng thẻ div.
    Code của em vẫn ổn mà. xuống dòng bình thường

    Cái kia của họ có phải màu đỏ đâu. với lại em chưa đặt widht cho nó
    Em cho nó vào thẻ <span> rồi đặt màu, đọ rộng, bo góc > ok ngay
     
  3. xdhcda

    xdhcda Moderator

    1,254
    551
    113
    hoangtungpc.info thích bài này.
  4. xdhcda

    xdhcda Moderator

    1,254
    551
    113
    Cái này không phải là <li> lên display:bock không có tách dụng đâu
    [​IMG]
    Code:
     

Chia sẻ trang này