目录
(1)如同table一样,表单的使用也需要一个主体标签,就是form
(2)内置属性action表示动作,这里我们使用跳转操作,指向服务器的地址
主要用于提交数据到远程服务端进行操作
(1)text文本框
(2)password密码
(3)submit提交按钮
(4)radio单选
(5)checkbox多选
(6)select下拉菜单,必须跟子元素option联合操作
通过name设置的变量名存储数据,数据以设置的变量名返回(这里是不规范的说法,但这个属性的作用类似于其它语言定义的变量)
注意:第1条中(4)、(5)、(6)这些选项需要设置相同的name
传入给定的默认数值,一般用于单选、多选、下拉菜单
(1)checked用于单选按钮默认选项
(2)selected用于下拉菜单默认选项
多用于光标第一手自动显示的位置
(1)决定表单弹出提示信息与否
(2)一次性只能设置一个框,但可以作用于form
-on 开启
-off 关闭
锁定不可修改,且值不会传递到服务器
锁定不可修改,只读,但值会传递到服务器
(1)submit,提交按钮,会传递到服务端
(2)reset,重置清空所有表单数据
(3)button,普通按钮,可结合js设计多样操作
(1)button type=submit
(2)button type=reset
(3)button type=button
- 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>
-
- 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>