css两列表单效果实现

css两列表单效果实现

<form id=”form1″ name=”form1″ method=”post” action=””>

    <label><span>应聘职位:</span><select class=”inputlength”  name=”应聘职位“>

      <option value=”1″ selected>测试</option>

      <option value=”2″>测试</option>

      <option value=”3″>测试</option>

      <option value=”4″>测试测试</option>

 </select>*</label>

     

  

   <label><span>性别:</span>

       

          <input  type=”radio” name=”RadioGroup1″ value=”单选” id=”RadioGroup1_0″ />

         

    

       

          <input type=”radio” name=”RadioGroup1″ value=”单选” id=”RadioGroup1_1″ />

         

        </label>

     

   <label><span>姓名:</span>

          <input  class=”inputlength” type=”text” name=”textfield” id=”textfield” />*</label>

     

 

  

     <label>

     <span>婚姻状况:</span>

    

        <input type=”radio” name=”RadioGroup2″ value=”单选” id=”RadioGroup2_0″ />

        未婚

   

  

        <input type=”radio” name=”RadioGroup2″ value=”单选” id=”RadioGroup2_1″ />

        已婚

  </label>

     

   <label>

   <span>出生日期:</span>

      <input  class=”inputlength” type=”text” name=”textfield2″ id=”textfield2″ />

   </label>

  

   <label>

      <span>毕业日期:</span>

      <input class=”inputlength”  type=”text” name=”textfield3″ id=”textfield3″ />

      </label>

 

 

   <label>

      <span>毕业院校:</span>

      <input class=”inputlength” type=”text” name=”textfield4″ id=”textfield4″ />

   </label>

 

   

   <label>

      <span>所学专业:</span>

    <input  class=”inputlength” type=”text” name=”textfield5″ id=”textfield5″ />

   </label>

      <label>

      <span>学历:</span>

      <input  class=”inputlength” type=”text” name=”textfield6″ id=”textfield6″ />

   </label>

   <label>

     <span>电子邮箱:</span>

    <input  class=”inputlength” type=”text” name=”textfield7″ id=”textfield7″ />

      </label>

 

    <label>

     <span>联系电话:</span>

      <input class=”inputlength”  type=”text” name=”textfield8″ id=”textfield8″ />*

   </label>

 

    <label>

     <span>地址:</span>

    <input  class=”inputlength” type=”text” name=”textfield9″ id=”textfield9″ />

  </label>

 

 

    <div class=”textarealength”>

     <span>个人特长:</span>

      <textarea   class=”inputlength2″ name=”textarea” id=”textarea” cols=”45″ rows=”5″></textarea>

  

    </div>

     <div class=”textarealength”>

     <span>个人简介:</span>

      <textarea  class=”inputlength2″  name=”textarea2″ id=”textarea2″ cols=”45″ rows=”5″></textarea>

    *</div>

 <div class=”centersubmit”>

      注意:带*为必填项

 </div>

    <div class=”centersubmit”>

      <input type=”submit” name=”button” id=”button” value=”提交” />

      <input type=”reset” name=”button2″ id=”button2″ value=”重置” />

 </div>

 

  </form>

 

    #humanresourcesform{

    float:left;

    width:400px;

    padding:10px;

    margin-bottom:15px;

    background:#f7f5f2;

    color:#7f7569;

    line-height:25px;

    }

    #humanresourcesform .inputlength{

    width:100px;

    }

    #humanresourcesform .inputlength2{

    width:300px;

    margin-top:5px;

    }

    #humanresourcesform label{

    display:block;

    float:left;

    width:200px;

    }

    #humanresourcesform span{

    display:block;

    float:left;

    width:70px;

    text-align:right;

    overflow:hidden;

    }

    #humanresourcesform select{

    display:block;

    float:left;

    }

    #humanresourcesform .textarealength{

    width:400px;

    }

    #humanresourcesform .centersubmit{

    width:120px;

    margin:0px auto;

    }

css两列表单效果实现

相关文章:

你感兴趣的文章:

标签云: