代码之家 › 专栏 › 技术社区 › philm

如何在Webprgramming中围绕控件创建一个框

css html

philm · 技术社区 · 7 年前

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

对不起,我对网络编程很陌生。任何帮助都将不胜感激,谢谢。

注意:如何创建这个盒子对我来说并不重要。我希望这个框是用HTML创建的,然后我可以用CSS设置它的样式。

1 回复 | 直到 7 年前

Giorgio Zanni 7 年前

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

自从 <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>

希望它有帮助!