HTML表单作用
HTML表单是什么？
简单来说，HTML表单就是：能够让用户输入具体内容的信息表，比如邮箱注册
163的注册页面
HTML表单的作用？
所以，HTML表单主要用于采集和提交用户输入的信息（向服务器提交）
- 表单是一个包含表单元素的区域；
- 表单元素是允许用户在表单中输入内容的；
- 表单元素指的是不同类型的 input 元素，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选（checkboxes)、提交按钮（button）等等。
HTML表单元素
-
form标签---定义被用户输入的标签
当点击表单提交按钮后，只有被form标签包裹的内容才会提交给服务器，所以要将表单内所有元素放在 form 标签对中，如下所示：
<form action="/DICM" method="get">
<label for="username">账户</label>
<input type="text" name="username" id="username">
<label for="password">密码</label>
<input type="password" name="password" id="password">
<input type="submit" value="登录">
</form>
上述代码示例
form标签有两个属性如下：
- action —— 规定当提交表单时向何处发送表单数据
- method —— 规定用于发送表单数据的 HTTP 方法
浏览器向服务器传输数据、发送请求的方式有两种 get、post
两者的区别主要由三点：请求方式不同、安全性不同、传输数据量不同
- get：将所有的请求数据拼接成key=value的形式连接一起，组装到URL上
- post：请求的URL不会发生变化，但是数据会通过浏览器传输给后台
两者的使用场景:
- 当向后台传送数据或者安全性要求更高时选择post
- 当向后台索要数据或者简单的安全性要求低是选择get
-
label标签---为 <input> 元素定义标注（标题）
<label>用户名</label>
<input type="text" name="username" >
“ 用户名 ” 三个字就是 label 标签展示的效果
也可以这样写
<label for="username">用户名</label>
<input type="text" name="username" id="suername">
只不过 for 把 label 标签绑定在了 input 元素上，即：当选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
将 for 属性的值设置为相关元素的 id 属性的值即可完成绑定
此时点击用户名等于点击输入框
-
input标签---定义输入域
一般格式为： <input type="?" name="?" value="?">
注：name 属性为 input 重要属性，若不设置 name 属性，浏览器则不会向服务器提交该类型信息
-
1. 单行文本输入框（text）
当 type=text 时为 “单行文本输入框”，用户名输入框 代码如下所示：
<input type="text" name="username" >
没看错，就是一个输入框条
注：文本框中只有一行文本，敲击回车键文本不会换行
如何在文本输入框中显示提示性默认语句？
使用 placehodler 即可，例如在 用户名输入框 中显示 “请输入用户名” 字样，代码如下所示：
<input type="text" name="username" id="username" placeholder="请输入用户名">
看，输入框中多了几个字，但不影响你输入字符
-
2. 密码输入框（password）
当 type=password 时为 “密码字段”，密码输入框 代码如下所示：
<input type="password" name="password" >
密码输入框
注：在文本框输入字符后，字符并不显示字符原本的样子，而是显示为 “ ● ”
-
3. 复选框（checkbox）
当 type=checkbox 时为 “复选框”，代码如下所示：
<input type="checkbox" name="food" value="米饭" >米饭
<input type="checkbox" name="food" value="面条" >面条
<input type="checkbox" name="food" value="馒头" >馒头
老板上菜单！
注：同一组选项，name属性推荐保持一致，便于归类分组
如何设置默认选中选项？
使用 checked="checked" 即可，例如默认选中 米饭+馒头，代码如下所示：
<input type="checkbox" name="food" value="米饭" checked="checked">米饭
<input type="checkbox" name="food" value="面条" >面条
<input type="checkbox" name="food" value="馒头" checked="checked">馒头
还差一碗汤！
-
4. 单选框（radio）
当 type=radio 时为 “单选框”，代码如下所示：
<input type="radio" name="sex" value="男" >
<input type="radio" name="sex" value="女" >
只能选一个，你该选哪个
注：同一组选项，name属性必须保持一致；
因：name 属性相同则属同一组选项，name属性不同则属于多组选项
如何设置默认选中选项？
使用 checked="checked" 即可，例如默认选中 男，代码如下所示：
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女" >女
原来和复选框是一样的方法
-
5. 文件上传（file）
当 type=file 时为 “上传文件框”，代码如下所示：
<input type="file" name="file" accept="image/png" >
上传文件：点击按钮打开选择文件对话框
注： < accept="image/png" > 意思是 可上传文件的类型为 “ png格式的图片 ”，即 < accept="?" > 属性的意思是 规定可上传文件的类型。
-
6. 隐藏（hidden）
当 type=hidden 时为 “隐藏”，代码如下所示：
<input type="hidden" name="保存的属性名" value="保存的属性值" >
空白一片什么都没有
注：此条信息不做展示，所以用户不会看到；hidden 用于暂存信息、安全校验
-
7. 按钮（button）
<input type="button" value="Buttom" >
我是button，点我点我，反正我不会提交表单信息！
注：点击按钮不会向服务器提交表单数据信息
-
8. 提交表单（submit）
<input type="submit" value="submit" >
注：点击按钮会向服务器提交表单数据信息
-
9. 重置表单（reset）
<input type="reset" value="reset" >
会清空填写的信息，回到初始默认状态
注：点击按钮会清空表单内填写的信息，即重置表单为初始默认状态（reset 必须放到 form 标签中，否则 reset 按钮不生效）
-
select标签---下拉菜单
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" >上海</option>
<option value="hangzhou">杭州</option>
</select>
正常状态
点开状态
如何设置下拉菜单默认选项？ 使用selected即可，默认选择 上海 如下所示：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
正常状态
点开状态
-
textarea标签---多行文本
<textarea name="article">这是一个5行的段落,字数多到数不清楚</textarea>
敲回车会换行的啊
注：多行文本框可拖动大小，需要使用其他代码锁住多行文本框的大小，参考文章；多行文本框敲击回车可以换行，应注意与 type=“text” 的区别
谨记：表单元素一定要放入 form 标签对中，才会被提交给服务器
本文章著作权归饥人谷_蛮力拳猫和饥人谷所有，转载须说明来源！
网友评论