如何在Webprgramming中的控件周围创建框

时间：2018-11-20 19:05:06

标签： html css

我有一些试图封装在网页上的控件。我尝试过几种封装控件的方法，但都没有成功。我尝试使用div，但效果不太好，我也尝试了以下帖子：

Create a group box around certain controls on a web form using CSS

正在发生的事情是正在创建一个框，但它位于我的网页顶部，而不是控件周围。

我想创建一个类似于此网页上的灰色框：

https://img.labnol.org/di/trigger1.png

下面，我附上了我用来创建表单的CSS和HTML代码的副本。该表单是我通过示例调整的简单文件上传表单。我正在自己的个人网站上使用它。

这是HTML：

<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury @ DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
  document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

function changeText()
{
    document.getElementById('p1').innerHTML = "1 file selected";
}

</script>

<link rel="stylesheet" href="test.css">

</head>
<body>
<h2>Upload</h2>

<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
  <input type="button" value="Upload File" onclick="uploadFile()">
  <progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>
  <h3 id="status"></h3>
  <p id="loaded_n_total"></p>
</form>
</fieldset>

<script>
// self executing function here
(function() {
   document.getElementById('upload_form')[0].onchange = changeText;

})();
</script>

</body>
</html>

这是CSS（在html中称为test.css）：

body{
  background: rgba(0,0,0,0.0);
}
form{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -250px;
  width: 500px;
  height: 200px;
  border: 4px dashed #0D0D0D;
}
form p{
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 140px;
  color: #0D0D0D;
  font-family: Arial;
}

h2{
    text-align: center;

}

form input[type="file"]{
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
}

form input[type="button"]{
  margin: 0;
  color: #fff;
  background: #16a085;
  border: none;
  width: 508px;
  height: 35px;
  margin-top: -20px;
  margin-left: -4px;
  border-radius: 4px;
  border-bottom: 4px solid #117A60;
  transition: all .2s ease;
  outline: none;
}

form input[type="button"]:hover{
  background: #149174;
    color: #0C5645;
}

form input[type="button"]:active{
  border:0;
}

form progressBar{
    text-align: center;
}

回到HTML，fieldset标记放置在我尝试封装的控件周围。我把它们留在那里，以便任何人都可以看到我遇到的主要问题。

很抱歉，但是我对Web编程非常陌生。任何帮助将不胜感激，谢谢。

注意：创建盒子的方式对我来说并不重要。我希望该框是用HTML创建的，然后可以使用CSS对其进行样式设置。

1 个答案:

答案 0 :(得分：1)

HTML的结构很好，但是CSS中的position: absolute属性与字段集冲突。

由于<fieldset>包装了所有控件，因此我建议给它固定的width和height并根据其定位子元素，即使用width: 100%您的孩子，并给他们所有相同的边距，以便他们很好地对齐。另外，请确保您在标记中编辑#progressBar样式。

以下是我刚才提到的更改的摘要：

body {
  background: rgba(0, 0, 0, 0.0);
}

fieldset {
  width: 508px;
  height: 270px;
  /* fixed width and height*/
  margin: 13vh auto;
}

#p1 {
  border: 4px dashed #0D0D0D;
  /* modified the actual text box instead of the entire form */
  width: 508px;
  height: 140px;
  line-height: 140px;
  margin-top: 0px;
}

form p {
  text-align: center;
  color: #0D0D0D;
  font-family: Arial;
}

h2 {
  text-align: center;
}

form input[type="file"] {
  position: absolute;
  margin: 0;
  outline: none;
  width: 508px;
  height: 140px;
  margin: 22px 4px;
  opacity: 1; 
  background-color: orange;
  /* Last two properties are a visual representation. Delete background-color and set opacity to 0 */
}

form input[type="button"] {
  margin: 0;
  color: #fff;
  background: #16a085;
  border: none;
  width: 100%;
  /* width relative to parent fieldset */
  height: 35px;
  margin-top: -20px;
  border-radius: 4px;
  border-bottom: 4px solid #117A60;
  transition: all .2s ease;
  outline: none;
}

form input[type="button"]:hover {
  background: #149174;
  color: #0C5645;
}

form input[type="button"]:active {
  border: 0;
}

form progressBar {
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <script>
    /* Script written by Adam Khoury @ DevelopPHP.com */
    /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
    function _(el) {
      return document.getElementById(el);
    }

    function uploadFile() {
      var file = _("file1").files[0];
      // alert(file.name+" | "+file.size+" | "+file.type);
      var formdata = new FormData();
      formdata.append("file1", file);
      var ajax = new XMLHttpRequest();
      ajax.upload.addEventListener("progress", progressHandler, false);
      ajax.addEventListener("load", completeHandler, false);
      ajax.addEventListener("error", errorHandler, false);
      ajax.addEventListener("abort", abortHandler, false);
      ajax.open("POST", "file_upload_parser.php");
      ajax.send(formdata);
    }

    function progressHandler(event) {
      //_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
      var percent = (event.loaded / event.total) * 100;
      _("progressBar").value = Math.round(percent);
      _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
    }

    function completeHandler(event) {
      _("status").innerHTML = event.target.responseText;
      _("progressBar").value = 0;
      document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
    }

    function errorHandler(event) {
      _("status").innerHTML = "Upload Failed";
    }

    function abortHandler(event) {
      _("status").innerHTML = "Upload Aborted";
    }

    function changeText() {
      document.getElementById('p1').innerHTML = "1 file selected";
    }
  </script>

  <link rel="stylesheet" href="test.css">

</head>

<body>
  <h2>Upload</h2>

  <fieldset>
    <legend>Group 1</legend>
    <form id="upload_form" enctype="multipart/form-data" method="post">
      <input type="file" name="file1" id="file1"><br>
      <p id="p1">Drag your file here or click in this area.</p>
      <input type="button" value="Upload File" onclick="uploadFile()">
      <!-- changed progressBar style -->
      <progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>
      <h3 id="status"></h3>
      <p id="loaded_n_total"></p>
    </form>

  </fieldset>

  <script>
    // self executing function here
    (function() {
      document.getElementById('upload_form')[0].onchange = changeText;

    })();
  </script>

</body>

</html>

希望有帮助！

相关问题
最新问题