【ibokan】表单<Form>元素的一些简单实现代码

最新推荐文章于 2022-06-23 22:24:45 发布

一喵呜

最新推荐文章于 2022-06-23 22:24:45 发布

阅读量1.4k

点赞数

分类专栏： HTMl5 HTML5自由者文章标签： HTMl5 HTML5自由者 Label标签表单 form

本文链接：https://blog.csdn.net/html5_/article/details/19931265

版权

HTML5自由者同时被 2 个专栏收录

94 篇文章 13 订阅

订阅专栏

HTMl5

81 篇文章 0 订阅

订阅专栏

代码实现方式：

<!DOCTYPE html>
<head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta charset="utf-8">
 <style type="text/css">
   div{ width:35%;margin-left:32%;}
 </style>
</head>
<body >
 <div>
  <form class="f1" action="http://www.baidu.com" method="get" >
   <fieldset >
   <legend>表单的注册</legend>
   <table width=100%  >
   <tbody>
    <tr ><td class=“left” width=40%  align="right"><label for="t1">姓 名：</label></td>
         <td class="right"><input type="text" id="t1" name="Name"></td>
    </tr>
    <tr><td class=“left”  width=40% align="right"><label for="Password1">密 码：</label></td> 
        <td class="right"><input id="Password1" type="password" name="Password" /></td>
    </tr>
    <tr><td class=“left”  width=40% align="right"><label for="e1">邮 箱：</label></td> 
        <td class="right"><input type="email" id="e1" name="youxiang" ></td>
    </tr>
    <tr><td class=“left”  width=40% align="right"><label for="1">性 别：</label></td> 
         <td class="right"><input type="radio" id="1" name="ssex" value="nan" />男<!-- name设置成一样的就行了-->
           <input type="radio" id="2" name="ssex" value="nv" />女
          </td>
    </tr>
    <tr><td class=“left” width=40% align="right">地 区：</td>
        <td><select id="selc" name="place">
             <option value="quanzhou">泉州</option>
             <option value="xiamen">厦门</option>
             <option value="zhangzhou" >漳州</option>
            </select>
        </td>
    </tr>
    <tr><td class=“left” width=40% align="right"><label for="txtarea">简 介：</label></td>
        <td><textarea id="txtarea"></textarea></td>
    </tr>
    <tr><td class=“left” width=40% align="right">兴 趣：</td>
        <td><input type="checkbox" id="cbox1" name="dushu" value="c1">读书
            <input type="checkbox" id="cbox2" name="yundong" value="c2">运动
            <input type="checkbox" id="cbox3"name="chihe" value="c3">吃喝
        </td>
    </tr>
    <tr><td class=“left” width=40% align="right">上 传：</td>
        <td> <input type="file" id="f1" name="shangchuan" value="File1" /></td>
    </tr>
    <tr><td class=“left” width=40% align="right" rowspan=2>
        <input id="Submit1" type="submit" value="提 交" />
        </td>
        <td>   <input id="Reset1" type="reset" value="重 置" />
        </td>
    </tr>
 </tbody>
</table>
</fieldset>
 </form>
</div>
</body>
</html>

注意其中的代码label实现的功能是使鼠标在点击文本的时候自动聚焦在文本框里！！！