html - 如何在 webprgramming 中围绕控件创建一个框-6ren

html - 如何在 webprgramming 中围绕控件创建一个框

转载作者：太空宇宙更新时间：2023-11-04 06:44:54

我尝试将一些控件封装到我的网页上。我尝试了几种不同的方法来封装我的控件，但都没有成功。我尝试使用 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，字段集标记放置在我试图封装的控件周围。我把它们留在那里，这样任何人都可以看到我遇到的主要问题。

抱歉，我对网络编程还很陌生。任何帮助将不胜感激，谢谢。

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

最佳答案

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

自 <fieldset>正在包装你所有的控件，我建议给它一个固定的 width和 height并基于此定位您的子元素，即使用 width: 100%给你的 child 并给他们所有相同的边距，这样他们就可以很好地对齐。还要确保你编辑你的 #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>