1、什么是表单？
HTML 表单用于搜集不同类型的用户输入，用来收集信息,例如:调查问卷,登录,注册等...
2、表单元素
其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能
3、元素
在HTML中 标签/标记/元素都是指HTML中的标签
例如: <a> a标签/a标记/a元素
4、表单格式
<form>
<表单元素>
</form>
5、常见的表单元素：
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素是最重要的表单元素。
input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同
6、input的type属性常见取值
text 文本域
password 密码域
radio 单选按钮
checkbox 复选框
button 样式为一个按钮
image 图片样式
file 获取文件样式
reset 重置按钮样式
submit 提交按钮样式
hidden 隐藏域
7、表单元素一定要写在表单中,如果不写也可以显示,但是在执行提交,重置操作的时候可能会有问题
8、<input type="text">通过value设置默认值
9、<input type="password">通过value设置默认值
10、<input type="radio" >
单选框默认不会互斥,若要实现多个单选框火炽就要,通过name属性给多个单选框设置同一个值
默认选中,通过checked属性设置,如:checked="checked"
11、<input type="checkbox">
多选框默认选中也是通过checed="checked"进行设置
如果设置属性的名字和值一样,可以只写属性省略等号和值
<input type="checkbox" checked="checked">
<input type="checkbox" checked="checked">不推荐使用
<body>
<!--
form: 是一个复合标签
格式:
<form>
相关表单元素/标签/标记
</form>
相关元素/标签/标记:
input: 输入 (文本域,密码域,单选框,复选框),通过type属性进行制定
非input元素
属性:
action: 是为了制定把收集的信息发送到的地址, 如果是网络地址一定要加上协议:(http://)
注意点:
1. 所有表单元素,必须要写在form标签之内
-->
<form action="">
<!--
input 标签
type: 指定输入类型
value: 设置默认的值
不会自动换行
name: 告诉服务器,收集的哪一个信息,只有表单元素具备name属性的时候,才会把相应的信息发送到服务器
-->
<!--1,文本域,单行
type="text"
type: 指定输入类型
value: 设置默认的值
placeholder: 提供默认的提示信息,没有输入文字的,会出现
-->
请输入账户: <input type="text" placeholder="务必输入汉语" name="name">
<!--
2.密码域:
type: password
-->
<br>
请输入密码: <input type="password" value="1235456" name="ps">
<!--
3. 单选框
type: radio:收音机
如果没有指定值,默认就是on/off,为了服务器辨别,指定value值
注意:要实现单选的功能,要指定name属性相同的值
-->
<br>
性别: 男<input type="radio" name="sex" value="male"> 女<input type="radio" name="sex" value="fmale">
<!--
4. 复选框
type: checkbox
要指定相同的name值
如果没有指定值,默认就是on/off,为了服务器辨别,指定value值
-->
<br>
兴趣爱好:
篮球<input type="checkbox" name="love" value="basketball">
排球<input type="checkbox" name="love" value="pai">
乒乓球<input type="checkbox" name="love" value="ping">
铅球<input type="checkbox" name="love" value="qian">
选择文件:<input type="file">
<input type="submit">
</form>
</body>
图片.png
http://www.w3school.com.cn/html/html_forms.asp
http://www.w3school.com.cn/html/html_form_elements.asp
http://www.w3school.com.cn/html/html_form_input_types.asp
http://www.w3school.com.cn/html/html_form_attributes.asp
http://www.w3school.com.cn/tags/tag_input.asp
网友评论