码迷,mamicode.com
首页 > 其他好文 > 详细

表单form的type种类

时间:2020-05-02 17:17:12      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:running   表单   reading   隐藏   标签   label   http   use   boa   

Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成,这些表单元素是单行/多行文本框,下拉菜单,按钮,复选框,单选按钮,时候表单元素时一般要配合label标签,用于描述其目的。
先讲讲关于form表单的type的属性值有哪些:Input组件用于接受来自用户的数据,其可用属性如下

1.type="text" 单行文本框

例如:
<form>
    <tr>
         <td>用户名:</td>
         <td><input type="text" value="默认值" name="username"></td>
     </tr>
</form>

2.type="password" 密码框,输入的内容将会被遮挡

例如:
<form>
    <tr>
         <td>密码:</td>
         <td><input type="password" name="password"></td>
     </tr>
</form>

3.type="checkbox" 复选框,必须使用value属性来描述该组件所提交的值,使用checked属性默认选中

例如:
<form>
    <tr>
         <td>爱好</td>
         <td>
             <label>
                 <input type="checkbox" name="hobbies" value="swimming">游泳
             </label>
             <label>
                 <input type="checkbox" name="hobbies" value="running">跑步
             </label>
             <label>
                 <input type="checkbox" name="hobbies" value="basketball">篮球
             </label>
             <label>
                 <input type="checkbox" name="hobbies" value="reading">阅读
             </label>
         </td>
    </tr>
</form>

4.type="radio" 单选按钮,必须使用value属性来描述该组件所提交的值,使用checked属性默认选中。一个单选按钮组中所有组件都应该具有相同的name值,这样,每次只能选中按钮组中的某一个组件

例如:
<form>
    <tr>
         <td>性别</td>
         <td>
             <label for="gender_male">
                 <input id="gender_male" type="radio" name="gender" value="male" checked="true">男
             </label>
             <label for="gender_female">
                 <input id="gender_female" type="radio" name="gender" value="female">女
             </label>    
         </td>
     </tr>
</form>

5.type="submit" 提交按钮

例如:
<form>
    <tr>
         <td colspan="2" align="center">
             <input type="submit" name="" value="注册">
         </td>
     </tr>
</form>

6.type="file"

例如:
<form>
    <tr>
         <td>照片</td>
         <td>
             <input type="file" name="pic">
         </td>
     </tr>
</form>

7.type="image" 图像按钮,必须使用src来加载图片,使用alt来声明替换文本
技术图片

8.type="reset" 重置按钮
技术图片

9.type="hidden" 隐藏域,该组件不显示在页面中,但是其值会被提交
技术图片

10.type="button" 普通按钮
技术图片

表单form的type种类

标签:running   表单   reading   隐藏   标签   label   http   use   boa   

原文地址:https://www.cnblogs.com/jlfw/p/12818463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!