HTML基础8表单

最新推荐文章于 2023-03-08 18:58:32 发布

原创最新推荐文章于 2023-03-08 18:58:32 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

前端HTML 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了HTML表单的各种元素及属性，包括文本框、密码框、按钮、单选框、复选框、下拉菜单、多行文本框等，并通过一个个人信息表单的例子展示了如何使用这些元素。

1.表单域

<form [属性名称=“值”]>
    
</form>

常用属性值
1.name=" " ：规定表单的名称
2.action=“值” ：提交表单url
3. method"get/post"：提交方式

表单控件：
（1）文本框
<input type="text" value="默认值"/>
(2) 密码框
<input type="password" placeholder="密码"/>
(3)提交按钮
<input type="submit" value="按钮内容"/>
（4）重置按钮
<input type="reset" value="按钮内容"/>
（5）按钮
<input type="button" value="按钮内容"/>
（6）单选框/单选按钮
<input type="radio" name="xxx" value="1"/>
<input type="radio" name="xxx" value="2"/>
<input type="radio" name="xxx" value="3"/>
(7)复选框
<input type="checkbox" name="xxx" value="1"/>
<input type="checkbox" name="xxx" value="2"/>
<input type="checkbox" name="xxx" value="3"/>
(8)下拉菜单

<select name="xxx">
    <option>菜单内容</option>
    <option>菜单内容</option>
    <option>菜单内容</option>
</select>

(9)多行文本框
<textarea name="xxx" cols="列数" rows="行数"> </textarea>

补充：
（1）表单字段集

<fieldset>
</fieldset>   相当于一个方框，在字段集中可以包含文本和其他元素

（2）字段级标题

<legend>
</legend>   legend元素可以在fieldset绘制的方框内插入一个标题

（3）表单元素
①上传文件框
<input type="file"/>
②图像域
<input type="image" width="" height="" border="" src=" 上传图片"/>
③提示信息标签
<lable for="绑定控件ID名"> </lable> 当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
④日期
<input type="date"/>
⑤颜色
<input type="color"/>

个人信息表单例：

<head>
    <style type="text/css">
    *{
         margin:0;
         padding:0;
     }
     #div{
         width=600px;
         height=400px;
         background-color="red";
     }
     </style>
</head>
<body>
    <div id="div">
         <form actino="#" method="post">
             <fieldset>
                 <legend>基本信息</legend>
                 <lable for="name">姓名</lable>
                 <input type="txt" id="name" />
                 <br/>
                  <lable for="age">年龄</lable>
                 <input type="txt" id="age" />
                 <br/>.
                 <lable>出生日期</lable>
                 <select>
                     <option>1995</option>
                     <option>1996</option>
                     <option>1997</option>
                 </select>
                 <span>年</span>
                 <select>
                     <option>10</option>
                     <option>11</option>
                     <option>12</option>
                 </select>
                 <span>月</span>
                 <select>
                     <option>9</option>
                     <option>10</option>
                     <option>11</option>
                 </select>
                 <span>日</span>
             </fieldset>
             
             <fieldset>
                 <legend>其他信息</legend>
                 <span>你喜欢TA吗</span> <br/>
                 <input type="radio" name="like" id="like"/>
                 <lable for="like">喜欢</lable>
                 <input type="radio" name="like" id="dislike"/>
                 <lable for="dislike">不喜欢</lable>
                 <br />
                 <span>那你喜欢什么</span><br/>
                 <input type="checkbox" name="like" id="money"/>
                 <lable for="money">金钱</lable>
                 <input type="checkbox" name="like" id="power"/>
                 <lable for="power">权力</lable>
                 <input type="checkbox" name="like" id="girl"/>
                 <lable for="girl">女人</lable>
                 <br/>
                 <span>还要说些什么吗</span><br/>
                 <input type="textarea" name="" cols="20" rows="5" />
                 <input type="submit" id="submit"/>
             </fieldset>
         </form>
     </div>
</body>