直接使用代码

图片素材

css代码

 <style>   
/*组件-表单类*/
.my-form  div.field { margin:15px 0}
.my-form  div.field .lab{ display:inline-block; width:100px; text-align:right; vertical-align:top}
.my-form  input[type=text],.my-form  input[type=password]{ height:30px; line-height:30px; background:#efefef;padding-left:8px; border:1px solid #ccc; }
.my-form  select{ height:30px; padding:0 15px; background:#efefef; border:1px solid #ccc ; font-size:14px;}
.my-form  select option{ font-size:14px;}
.my-form  textarea{ border:1px solid #ccc; background:#efefef; padding:8px;resize: none;}
</style>

HTML+JS代码

     <form action="" enctype="multipart/form-data" method="get" class="my-form">

          <div class="field">
            <label for="aa" class="lab">姓名：</label>
            <input type="text" size="40" name="aa" />
          </div>

          <div class="field">
            <label class="lab">性别：</label>
            <input type="radio" name="" /> 男
            <input type="radio" name="" /> 女
          </div>

          <div class="field">
            <label class="lab">电话：</label>
            <input type="text" size="40" name="" />
          </div>

          <div class="field">
            <label class="lab">期望工作：</label>
            <input type="checkbox" name="" /> web前段
            <input type="checkbox" name="" /> 程序员
            <input type="checkbox" name="" /> 网页设计
          </div>

          <div class="field">
            <label class="lab">学历：</label>
            <select name="">
              <option value="大专">大专</option>
              <option value="本科">本科</option>
              <option value="研究生">研究生</option>
            </select>
          </div>

          <div class="field">
            <label class="lab">备注：</label>
            <textarea rows="4" cols="60"></textarea>
          </div>

          <div class="field">
            <label class="lab"></label>
            <input type="submit" class="btn-success" value="提交" />
          </div>

        </form>