响应HTML表单

我使用下面的CSS代码：响应HTML表单

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>

我的问题是如何改变这种代码放到一个负责任的网站。一切正常调整大小，除了我似乎无法调整我的表格和窗体。有人能帮助我吗？

来源

2016-02-26 Jorgovanka

就可以把小提琴吗？ –

这是我第一次使用小提琴，但在这里你去https://jsfiddle.net/wpsgk91o/ – Jorgovanka

我看到一个不必要的div关闭后，页脚。删除后，你可以检查吗？ –

这里有一些事情要做。

首先，你没有对您的一些字段的设置宽度，所以更改：

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

到：

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

而且从width: 988px;改变.headerbar到width: 100%;。

对于响应式框架，您需要确保您从未拥有一组固定的width而不确保连接了max-width，否则您的内容大小将永远不会低于固定宽度的大小。

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

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

你没有特别要求这一点，但是当我在一个较小的视图检查你的代码，我注意到你的width: 50%;导致的背景看关，这似乎不是你的意图。我会建议添加.leftbar { width: 100%; }以及.rightbar { width: 100%; }里面的@media screen and (max-width:700px){

这只是离开table。表格不会自动分解，所以通常不是我们想要在开发响应式网站时使用的东西，但是当然有时候并没有解决这个问题。

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

希望这能帮助你走上正轨。祝你好运！

来源

2016-02-26 06:40:31

我现在尝试它仍然可以得到工作表，但一切工作正常，谢谢 – Jorgovanka

好极了，如果你可以请接受答案，我将不胜感激。 –

谢谢你的帮助:) – Jorgovanka

如果要设置宽度不为这些

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

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

来源

2016-02-26 06:42:53 Sharon

响应HTML表单

回答

相关问题