定位表单元素

时间：2014-10-16 08:32:02

标签： html css forms

我设计了一个用于输入数据的表单，但是为了正确定位我使用的表单元素 ＆＃34;利润率左＆＃34;每个元素在同一位置彼此下方

有没有办法更好地定位？

<head>
    <title>Placement insert</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style>
        #header {
            text-align: center;
            height:100px;
            witdh:1360px;
            background-color: lightskyblue;

        }
        #content {
            height: 200px;
            width: 400px;
            background: lightgreen ;
            margin-top:100px;
            margin-left: 500px ;
        }
    </style>
</head>

<body>
    <div id= "header" >
    <h3 > YMC, Pune </h3>
    <h4 > Department of Computer Science </h4>
        </div>
<div id ="content"  >
    <form name="log" action="insplacement.jsp" method="post">
           Year:<input type="text" name="year" value="" size="20" Style ="margin-left: 165px"/><br>
           No of Company Visited:<input type="text" name="company" value="" size="20" Style ="margin-left: 45px" /><br>
           Number of Students Placed:<input type="text" name="num" value="" size="20" style="margin-left: 25px" /><br>
           Percentage of Students Placed:<input type="text" name="percentage" value="" size="20" style = "margin-left: 9px"/><br>
           Maximum Salary offered (p.a.):<input type="text" name="max" value="" size="20" style = "margin-left: 4px"/><br> 
           Minimum Salary offered (p.a.):<input type="text" name="min" value="" size="20" style = "margin-left: 7px"/><br>
           Average Salary offered (p.a.):<input type="text" name="avg" value="" size="20" style = "margin-left: 15px"/><br>
           <input type="submit" value="Insert" name="logButton" />
           <input type="reset" value="Clear" />

        </form>
        </div>
</body>

4 个答案:

答案 0 :(得分：2)

保持简单

无需添加任何额外的HTML元素;让表单元素标记说明一切。

首先，为标签指定label元素和for属性，通过label将id与其匹配的输入相关联。

关于可用性的说明

在我们继续之前，已经进行了大量的可用性研究 - here is one - 建议将标签置于之上，以便更快，更轻松地完成表单。在这里，我提供了两种选择。

对我来说，这些例子很漂亮

“显示代码段”并运行它

选项1 - 输入左侧的标签

  • 将display: inline-block放在标签和输入

    • 上

  • 在标签上放置一个足够大的宽度以包含最大的标签

  • 在表单上放置一个宽度以包含您的输入和标签。

form {
  width: 500px;
}
label {
  display: inline-block;
  width: 200px;
}
input {
  display: inline-block;
}
<form action="insplacement.jsp" id="log" method="post" name="log">

  <label for="one">Year:</label>
  <input id="one" name="year" size="20" type="text" value="">

  <label for="two">No of Company Visited:</label>
  <input id="two" name="company" size="20" type="text" value="">

  <label for="three">Number of Students Placed:</label>
  <input id="three" name="num" size="20" type="text" value="">

</form>

选项2 - 输入上方的标签

这更简单，一个CSS属性：

  • 在标签上放置display: block 

label {
  display: block;
}
<form action="insplacement.jsp" id="log" method="post" name="log">

  <label for="one">Year:</label>
  <input id="one" name="year" size="20" type="text" value="">

  <label for="two">No of Company Visited:</label>
  <input id="two" name="company" size="20" type="text" value="">

  <label for="three">Number of Students Placed:</label>
  <input id="three" name="num" size="20" type="text" value="">

</form>

答案 1 :(得分：0)

#content {
    height: 200px;
    width: 400px;
    background: lightgreen ;
    margin: 100px auto 0;
}

和HTML 

<form>
    <fieldset>
        <div>
            <label for="name">Name</label>
            <input id="name" />
        </div>
        <div>
            <label for="telephone">Telephone</label>
            <input id="telephone" />
        </div>
    </fieldset>
</form>

答案 2 :(得分：0)

试试这样： -

式 - 

#header {
    text-align: center;
    height:100px;
    /*width:1360px;*/
    background-color: lightskyblue;

}
#content {
    height: 200px;
    width: 400px;
    background: lightgreen ;
    margin: 100px auto 0;
    /*margin-top:100px;*/
    /*margin-left: 500px ;*/
}
dt , dd{width: 50%;margin: 0 0 8px;float: left;height: 20px;}

<dl>
          <dt> Year:</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> No of Company Visited:</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> Number of Students Placed:</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> Percentage of Students Placed:</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> Maximum Salary offered (p.a.):</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt> Minimum Salary offered (p.a.):</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
          <dt>Average Salary offered (p.a.)</dt>
          <dd><input type="text" name="year" value="" size="20" /></dd>
    </dl>

DEMO

答案 3 :(得分：0)

调整浏览器大小以查看此操作

<强> HTML 

<section class="feedback_form">
    <form action="" method="post">
        <fieldset>
            <label>Name:</label>
            <input type="text" name="name" id="name">
        </fieldset>
        <fieldset>
            <label>Company Name:</label>
            <input type="text" name="company_name">
        </fieldset>
        <fieldset>
            <label>City:</label>
            <input type="text" name="city">
        </fieldset>            
    </form>
</section>

<强> CSS 

.feedback_form {
    margin: 15px 0 0 0;
}
.feedback_form label {
    display: block;
}
.feedback_form input, .feedback_form select, .feedback_form textarea {
    width: 95%;
}
.feedback_form input[type=submit], .feedback_form input[type=reset] {
    width: auto;
}
fieldset {
    border: 0;
    padding:0 0 10px 0;
}
@media screen and (min-width:768px) {
    .feedback_form {
        width:80%;
        margin:0 auto;
    }
    .feedback_form label {
        width: 45%;
        display: inline-block;
        vertical-align: top;
        font-weight:normal;
    }
    .feedback_form input, .feedback_form select, .feedback_form textarea {
        width: 50%;
    }
    .feedback_form input[type=submit], .feedback_form input[type=reset] {
        margin-right: 10px;
        padding: 5px;
    }
}

Fiddle Demo

相关问题
最新问题