概述
目录
一、介绍
1、基本使用方式
2、作用
二、常用input
1、内置属性input类型（type）
2、需设定属性定义变量名（name）
3、可设定属性默认值（value）
4、可设置默认选项（checked、selected）
三、属性补充
1、自动获取焦点（autofocus）
2、表单自动补全（autocomplete）
3、disabled
4、只读（readonly）
四、常用按钮与双标签
1、单标签input常用按钮
五、代码实例
一、介绍
1、基本使用方式
（1）如同table一样，表单的使用也需要一个主体标签，就是form
（2）内置属性action表示动作，这里我们使用跳转操作，指向服务器的地址
2、作用
主要用于提交数据到远程服务端进行操作
二、常用input
1、内置属性input类型（type）
（1）text文本框
（2）password密码
（3）submit提交按钮
（4）radio单选
（5）checkbox多选
（6）select下拉菜单，必须跟子元素option联合操作
2、需设定属性定义变量名（name）
通过name设置的变量名存储数据，数据以设置的变量名返回（这里是不规范的说法，但这个属性的作用类似于其它语言定义的变量）
注意：第1条中（4）、（5）、（6）这些选项需要设置相同的name
3、可设定属性默认值（value）
传入给定的默认数值，一般用于单选、多选、下拉菜单
4、可设置默认选项（checked、selected）
（1）checked用于单选按钮默认选项
（2）selected用于下拉菜单默认选项
三、属性补充
1、自动获取焦点（autofocus）
多用于光标第一手自动显示的位置
2、表单自动补全（autocomplete）
（1）决定表单弹出提示信息与否
（2）一次性只能设置一个框，但可以作用于form
-on 开启
-off 关闭
3、disabled
锁定不可修改，且值不会传递到服务器
4、只读（readonly）
锁定不可修改，只读，但值会传递到服务器
四、常用按钮与双标签
1、单标签input常用按钮
（1）submit，提交按钮，会传递到服务端
（2）reset，重置清空所有表单数据
（3）button，普通按钮，可结合js设计多样操作
2、button双标签按钮方式（可嵌套其它元素）
（1）button type=submit
（2）button type=reset
（3）button type=button
五、代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表单</title>
<!--
如同table一样，表单的使用也需要一个主体标签，就是form
主要用于提交数据到远程服务端进行操作
1.action表示动作，这里我们使用跳转操作，指向服务器的地址
2.介绍几个input使用
（1）限定input类型（type）
-text文本框
-password密码
-radio单选
-submit提交按钮
-checkbox多选
-select下拉菜单，下面必须跟option联合操作
（2）限定参数提交（name）
-通过name参数传入数据，数据以name的属性返回，类似于定义的变量
（3）默认值（value）
-传入给定的默认数值，一般用于单选、多选、下拉菜单
（4）默认选项（checked、selected）
-checked用于单选按钮默认选项
-selected用于下拉菜单默认选项
3.input是行内块元素，默认行排列，但可以设置大小宽度，所以一般用br标签分隔
4.补充
（1）自动获取焦点（autofocus），多用于光标第一手自动显示的位置
（2）表单自动补全（autocomplete），决定表单弹出提示信息与否
一次性只能设置一个框，但可以作用于form
-on 开启
-off 关闭
（3）disabled，锁定不可修改，且值不会传递
（4）readonly，锁定不可修改，只读，但值会传递
（5）常用按钮
-submit，提交按钮，会传递到服务端
-reset，重置清空所有表单数据
-button，普通按钮，可结合js设计多样操作
（6）双标签按钮方式，可嵌套其它元素
-button type=submit
-button type=reset
-button type=button
-->
</head>
<body>
<form action="table_long.html" autocomplete="off">
账号<input type="text" name="username" />
<br />
密码<input type="password" name="password" autofocus />
<p>性别</p>
男<input type="radio" name="select_one" value="男" checked />
女<input type="radio" name="select_one" value="女" />
<p>喜欢的水果</p>
西瓜<input type="checkbox" name="select_more" value="西瓜" />
香蕉<input type="checkbox" name="select_more" value="香蕉" disabled />
苹果<input type="checkbox" name="select_more" value="苹果" />
<p>城市</p>
<select name="selected">
<option value="北京">北京</option>
<option value="重庆" selected>重庆</option>
<option value="上海">上海</option>
</select>
<br />
<input type="submit" name="button" />
<input type="reset" />
<input type="button" value="普通按钮" />
<br />
<button type="submit" name="button">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
</html>
最后
以上就是怕孤独春天为你收集整理的浏览器表单的基本使用一、介绍二、常用input三、属性补充四、常用按钮与双标签五、代码实例的全部内容，希望文章能够帮你解决浏览器表单的基本使用一、介绍二、常用input三、属性补充四、常用按钮与双标签五、代码实例所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复