表单form的type种类

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单form的type种类相关的知识,希望对你有一定的参考价值。

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种类的主要内容,如果未能解决你的问题,请参考以下文章

html5中form表单新增属性以及改良的input标签元素的种类

post请求和get请求content_type的种类

form.action传参之后servlet不能接收form表单数据,附上代码,求高手解决

form表单里的按钮触发form表单的提交

关于form表单里包裹的btn按钮

form表单回车提交问题