美文网首页
3.24调查问卷(表单的高级应用)

3.24调查问卷(表单的高级应用)

作者: Tn299 | 来源:发表于2019-03-24 17:08 被阅读0次

    题目

    1.制作调查问卷
    需求说明
    (1) .使用语义化的标签制作调查问卷。
    (2) .能够实现鼠标点击文本时,与文本对应的表单元素自动获得焦点。
    实现效果


    image.png

    代码

    <body>
       <form action="#" method="post">
         <fieldset>
           <legend>用户信息表</legend>
           <table width="700" height="400" align="center">
             <tr>
               <td>姓名:<input type="text" name="username" value=""></td>
             </tr>
             <tr>
               <td>年龄:<input type="text" name="age" value=""></td>
             </tr>
             <tr>
               <td>
                 性别:
                 <label for="sex">男</label>
                 <input type="radio" name="666" id="sex">
                 <label for="sexr">女
                 <input type="radio" name="666" id="sexr">
               </td>
             </tr>
             <tr>
               <td>手机:<input type="text" name="telephone" value=""></td>
             </tr>
             <tr>
               <td>邮箱:<input type="text" name="ema" value=""></td>
             </tr>
             <tr>
               <td>
                 爱好:<input type="checkbox" name="hobbt" id="hx">
                      <label for="hx">滑雪</label>
                      <input type="checkbox" name="hobbt" id="ps">
                      <label for="ps">爬山</label>
                      <input type="checkbox" name="hobbt" id="yy">
                      <label for="yy">游泳</label>
                      <input type="checkbox" name="hobbt" id="sw">
                      <label for="sw">上网</label>
                      <input type="checkbox" name="hobbt" id="tq">
                      <label for="tq">踢球</label>
               </td>
             </tr>
           </table>
         </fieldset>
       </form>
    </body>
    

    效果图

    image.png

    相关文章

      网友评论

          本文标题:3.24调查问卷(表单的高级应用)

          本文链接:https://www.haomeiwen.com/subject/iwbuvqtx.html