响应式 HTML 表单答案

【问题标题】：Responsive HTML form响应式 HTML 表单
【发布时间】：2016-02-26 06:02:01
【问题描述】：

我正在使用以下 css 代码：

html {
    background: #2B2B2B url(images/bg.gif) repeat;
}
body {
    max-width: 1000px;
    margin: 0px auto;
    font-family: sans-serif;
    margin: 0 auto;
}
header,
footer,
aside {
    display: block;
}
h1 {
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
    text-decoration: underline;
}
label {
    display: block;
}
fieldset {
    border: 0px dotted red;
    width: 400px;
    margin: 0 auto;
}
input,
select {
    width: 400px;
    height: 30px;
    border-radius: 5px;
    padding-left: 10px;
    font-size: 14px;
}
select {
    line-height: 30px;
    background: #f4f4f4;
}
button {
    font-size: 14px;
    padding: 5px;
    background: #333333;
    color: #FFFCEC;
    float: right;
    width: 100px;
}
button:hover {
    font-size: 16px;
}
#edit {
    background: #DC5B21;
}
#delete {} #course,
#name,
#profesor,
#subject {
    background: #ABDCD6;
}
label {
    font-size: 15px;
    font-weight: bold;
    color: #282827;
}
table {
    border-spacing: 0.5rem;
    border-collapse: collapse;
    margin: 0 auto;
    background: #ABDCD6;
}
th {
    background: #E9633B;
}
th,
td {
    border: 2px solid black;
    padding: 10px;
}
td {
    font-weight: bold;
    font-style: oblique;
}
tr:nth-child(even) {
    background: #ABDCD6
}
tr:nth-child(odd) {
    background: #DCD8CF
}
.container {
    width: 1000px;
    margin: 0 auto;
}
.headerbar {
    width: 988px;
    float: left;
}
.headerbar.top {
    background: linear-gradient(45deg, rgba(255, 102, 13, 1) 3%, rgba(255, 109, 22, 1) 32%, rgba(255, 121, 38, 1) 77%, rgba(255, 121, 38, 1) 100%);
    min-height: 100px;
    border-radius: 19px 30px 0px 0px;
    box-shadow: #938D94 7px 7px 5px;
}
.headerbar.bottom {
    background: linear-gradient(45deg, rgba(255, 102, 13, 1) 3%, rgba(255, 109, 22, 1) 32%, rgba(255, 121, 38, 1) 77%, rgba(255, 121, 38, 1) 100%);
    min-height: 60px;
    border-radius: 25px;
    border-radius: 0px 0px 37px 34px;
    box-shadow: #938D94 7px 1px 5px;
}
.leftbar {
    width: 50%;
    background: #EB593C;
    min-height: 605px;
    float: left;
    border-radius: 4px;
    border: 3px dashed #282827;
}
.rightbar {
    width: 47%;
    background: #221E1D;
    min-height: 595px;
    float: left;
    padding: 5px;
    border: 2px solid #EB593C;
    box-shadow: #938D94 5px 5px 5px;
}
#submit,
#clear {
    border-radius: 25px;
}
input:focus {
    border: 1px solid #FF9933;
}
@media screen and (max-width: 700px) {
    .leftbar,
    .rightbar {
        float: none;
    }
    .headerbar.top h1 {
        margin-left: 50px;
        text-align: center;
        float: left;
    }

这是我的 HTML 页面，非常简单

<!DOCTYPE html>
<html>
    <head>
        <title>My web app</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="mystyle2.css" rel="stylesheet"/>
        <script>
            var studentsArray = [];
            var selectedIndex = -1;
            function init() {
                document.getElementById("tablerows").innerHTML = "";
                if (localStorage.studentsRecord) {
                    studentsArray = JSON.parse(localStorage.studentsRecord);
                    for (var i = 0; i < studentsArray.length; i++) {
                        prepareTableCell(i, studentsArray[i].course, studentsArray[i].name, studentsArray[i].profesor, studentsArray[i].subject);
                    }
                }
            }
            function onRegisterPressed() {
                if(validate()){
                var course = document.getElementById("course").value;
                var name = document.getElementById("name").value;
                var profesor = document.getElementById("profesor").value;
                var subject = document.getElementById("subject").value;
                var stuObj = {course: course, name: name, profesor: profesor, subject: subject};
                if (selectedIndex === -1) {
                    studentsArray.push(stuObj);
                } else {
                    studentsArray.splice(selectedIndex, 1, stuObj);
                }
                localStorage.studentsRecord = JSON.stringify(studentsArray);
                init();
                onClarPressed();
            }else{

            }
            }
            function prepareTableCell(index, course, name, profesor, subject) {
                var table = document.getElementById("tablerows");
                var row = table.insertRow();
                var courseCell = row.insertCell(0);
                var nameCell = row.insertCell(1);
                var profesorCell = row.insertCell(2);
                var subjectCell = row.insertCell(3);
                var actionCell = row.insertCell(4);
                courseCell.innerHTML = course;
                nameCell.innerHTML = name;
                profesorCell.innerHTML = profesor;
                subjectCell.innerHTML = subject;
               actionCell.innerHTML = '<button id="edit" onclick="onEditPressed(' + index + ')">Edit</button><br/><button id="delete" onclick="deleteTableRow(' + index + ')">Delete</button>';
            }
            function deleteTableRow(index) {

                studentsArray.splice(index, 1);
                localStorage.studentsRecord = JSON.stringify(studentsArray);
                init();
            }
            function onClarPressed() {
                selectedIndex = -1;
                document.getElementById("course").value = "";
                document.getElementById("name").value = "";
                document.getElementById("profesor").value = "";
                document.getElementById("subject").value = "Math";
                document.getElementById("submit").innerHTML = "Register";
            }

            function onEditPressed(index) {
                selectedIndex = index;
                var stuObj = studentsArray[index];
                document.getElementById("course").value = stuObj.course;
                document.getElementById("name").value = stuObj.name;
                document.getElementById("profesor").value = stuObj.profesor;
                document.getElementById("subject").value = stuObj.subject;
                document.getElementById("submit").innerHTML = "Update";

            }


             function validate(){

                var errors = [];


                var re = /^[\w]+$/;
                var id = document.getElementById("course");
                if(id.value==="" ){
                    errors.push("Course name is empty");
                }else if(id.value.length<3){
                    errors.push("Course name is to shoort");
                }else if(!re.test(id.value)){
                    errors.push("Input contains invalid characters");
                }

                var name = document.getElementById("name");
                var regEx = /^[a-zA-Z ]+$/; 
                if(name.value===""){
                    errors.push("Name cannot be empty");
                }else if(!regEx.test(name.value)){
                   errors.push("Name contains invalid characters");
                }

                var profesor = document.getElementById("profesor");
                if(profesor.value===""){
                    errors.push("Professor field cannot be empty");
                }else if(!regEx.test(profesor.value)){
                    errors.push("Professor field contains invalid characters");
                }

                if(errors.length>0){
                    var message = "ERRORS:\n\n";
                    for(var i = 0;i<errors.length;i++){
                        message+=errors[i]+"\n";
                    }
                    alert(message);
                    return false;
                }

                return true;
            }



        </script>
    </head>
    <body onload="init()">





            <header class="headerbar top"><h1>ITEC3506: Assignment#2</h1></header>



            <aside class="leftbar">


                <div>

                    <fieldset>
                        <label for="course"><span>Course Name</span></label>
                        <input type="text" placeholder="enter name of course" id="course">
                    </fieldset>
                    <fieldset>
                        <label for="name">Your Name</label>
                        <input type="text" placeholder="enter your name" id="name">
                    </fieldset>
                    <fieldset>
                        <label for="profesor">Course Professor</label>
                        <input type="text" placeholder="enter course Professor" id="profesor">
                    </fieldset>
                    <fieldset>
                        <label for="subject">Subject</label>
                        <select id="subject">
                            <option value="Math">Math</option>
                            <option value="Physics">Physics</option>
                            <option value="Chemistry">Chemistry</option>
                            <option value="English">English</option>
                            <option value="CS">CS</option>
                        </select>
                    </fieldset>
                    <fieldset>
                        <label for="submit"> </label>
                        <button id="submit" onclick="onRegisterPressed()">Submit</button>
                        <button id="clear" onclick="onClarPressed()">Clear</button>
                    </fieldset>
                </div>

            </aside>

            <aside class="rightbar">
                <table id="regtable">
                    <thead>
                        <tr>
                            <th>Course</th>
                            <th>Student</th>
                            <th>Professor</th>
                            <th>Subject</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="tablerows">
                    </tbody>
                </table>
            </aside>
            <footer class="headerbar bottom"></footer>
        </div>
    </body>
</html>

我的问题是如何将此代码转换为响应式网站。一切都在正常调整大小，除了我似乎无法调整我的表格和表格的大小。有人可以帮我吗？

【问题讨论】：

你能附上小提琴吗？
这是我第一次使用小提琴，但这里你去jsfiddle.net/wpsgk91o
我看到一个不必要的 div 在页脚之后关闭。删除后，可以查看吗？
我还看到您将fieldset 设置为400px 宽度，但没有设置max-width。如果目标是完全响应式外观，则需要确保其上有一个max-width: 100%;，这样它就不会导致滚动条出现在 400 像素以下。
没有任何改变，我认为问题出在 css 文件中，因为我似乎无法调整表单或表格的大小???

标签： javascript html forms css

【解决方案1】：

这里发生了一些事情。

首先，您的一些字段没有设置宽度，因此请更改：

fieldset{
    border: 0px dotted red;
    width: 400px;
    margin: 0 auto;
}

到：

fieldset{
    border: 0px dotted red;
    width: 400px;
    margin: 0 auto;
    max-width: 100%;
}

还将.headerbar 从width: 988px; 更改为width: 100%;。

对于响应式框架，您需要确保在没有附加max-width 的情况下，您永远不会设置固定的width，否则您的内容大小将永远不会低于固定宽度的大小。

其次，我注意到以下几点：

.leftbar{
    width: 50%;
    background: #EB593C;
    min-height: 605px;
    float: left;
    border-radius: 4px;
    border: 3px dashed #282827;
}

您没有特别指出这一点，但是当我在较小的视图中检查您的代码时，我注意到您的 width: 50%; 导致背景看起来不正常，这似乎不是您的意图。我建议在@media screen and (max-width:700px){ 中添加.leftbar { width: 100%; } 和.rightbar { width: 100%; }

只剩下table。表格不会自动分解，因此通常不是我们在开发响应式网站时想要使用的东西，但当然有时无法绕过这个问题。

table 有几种方法可以解决此问题。一种是将table 设置为display:block; 并将overflow-x: scroll; 应用到您的@media screen and (max-width:700px){ 内部，这将允许用户在从较小的屏幕查看它时向左/向右滚动。另一种方法是使用可以实现此目的的各种 Javascript 插件之一。

希望这有助于您走上正轨。祝你好运！

【讨论】：

我现在试了一下，仍然可以让桌子工作，但其他一切都很好，谢谢
太好了，如果你能接受答案，我将不胜感激。
非常感谢您对我的帮助 :)
一点问题都没有！

【解决方案2】：

不要为这些设置宽度

input,select{/*width: 400px;*/}
fieldset{/*width: 400px;*/}

如果你设置宽度，你显然无法获得响应式布局

【讨论】：