<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<!-- 表单标签用form表示，用于与服务器的交互，表单就是收集用户信息的，让用户填写、选择的 -->
<!-- 属性：
1. name：表单的名称，用于js操作或控制表单时使用
2. id：表单的名称，用于js操作或控制表单时使用
3. action：指定表单数据的处理程序，一般是PHP，例如action="login.php"，表示表单要提交到哪里去
4. methed：表单数据的提交方式，一般为get（默认）或者post，表示表单以怎样的方式提交
get提交和post提交的区别：
get提交：将表单数据以"name=value"的形式追加到action指定的处理程序的后面，两者间用“？”隔开，每一个表单的“name=value”间用“&”隔开，
特点：只适合提交少量信息，并且不太安全（不要提交敏感信息），提交的数据类型只限于ASCII字符。
post提交：将表单数据直接发送（隐藏）到action指定的处理程序。post发送的数据不可见，action指定的处理程序可以获取到表单数据，
特点：可以提交海量数据，相对安全，提交的数据格式也是多样的(Word、Excel、rar、img)
注意：表单和表格嵌套时，是在标记中套标记
5. Enctype：表单数据的编码方式（加密方式），取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
Application/x-www-form-urlencoded：默认的加密方式，除了上传文件外都可以
Multipart/form-data：上传附件时，必须使用这种编码方式
-->
<form>
<!-- input：输入标签，用于接收用户输入 -->
<!-- type="属性值"，属性值可以为：
1. text（默认）文本类型
2. password 密码类型
3. radio 单选按钮，名字相同的按钮作为一组进行单选，天生是不能互斥的，就像收音机一个，一个按下，之前按下的必定抬起。
4. checkbox 多选按钮，name相同的按钮作为一组进行多选，
5. checked 将多选按钮或单选按钮默认处于选中状态，当input标签为radio时可以用此属性，属性值也是checked，可以省略
6. hidden 隐藏框 在输入信息包含用户不希望看见的内容
7. button 按钮 结合js代码进行使用
8. submit 提交按钮 传送当前表单的数据给服务器或者其它程序处理，这个按钮不需要写value，自动就有“提交”文字，这个按钮真的提交功能，点击按钮后，这个表单就会被提交到form标签的action指定的那个页面中去
9. reset 重置当前表单的内容，并且初始化到默认值状态
10. image 图片按钮，和提交按钮的作用完全一致，只是按钮能显示图片
11. file 文件选择框，如果要限制文件上传的类型，需要配合js实现验证，对上传的文件安全检查：一是扩展名的检查，而是文件内容数据的检查。
value=“”文本框中的默认内容
size="50" 表示文本框中最多能显示50个字符
readonly 文本框只读不能编辑，因为它的属性值也是readonly，可以不用写，用了这个属性之后，在google浏览器中光标点不进去，在IE中光标能点进去，但是不能编辑
disabled 文本框只读不能编辑，光标不能点进去
-->
<b>普通文本输入框：</b>
<input type="text" value="呵呵">
<br>
<b>密码文本输入框：</b>
<input type="password" value="呵呵">
<br>
<b>单选按钮：</b>
<input type="radio" name="a">
<input type="radio" name="a">
<input type="radio" name="a">
<br>
<b>多选按钮：</b>
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<br>
<b>隐藏框：</b>
<input type="hidden">
<br>
<b>按钮：</b>
<input type="button">
<br>
<b>提交按钮：</b>
<input type="submit">
<br>
<b>重置按钮：</b>
<input type="reset">
<br>
<b>图片按钮：</b>
<input type="image" src="a.jpg" width="20" height="20">
<br>
<b>文件选择框：</b>
<input type="file">
<br>
<b>文本框设置为只读模式：</b>
<input readonly="" value="此文本框为只读模式，不可编辑">
<br>
<b>文本框设置为只读模式</b>
<input disabled value="此文本框为只读模式，不可编辑，光标不可选中">
</form>
</body>
</html>
扫一扫
5219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
