HTML表单

2016-11-30 本文已影响0人饥人谷_Shirley

一、什么是表单

可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。
表单元素指的是不同类型的 input 元素，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选（checkboxes)、提交按钮（button）等等。
表单的种类有注册表、留言薄、站点导航条、搜索引擎等。
如图：

经典表单.jpg

二、表单的标签<form>

form：包裹表单，形成完整的数据
form标签有两个属性如下：

action —— 这个属性规定该表单提交的信息存储的文件以及它的地址
method —— 这个属性规定该表单的提交方式

浏览器向服务器传输数据、发送请求的方式有两种 get、post

get：将所有的请求数据拼接成key=value的形式连接一起，组装到URL上【类似搜索使用】
post：请求的URL不会发生变化，但是数据会通过浏览器传输给后台【账号密码使用】

两者的使用场景
当向后台传送数据或者安全性要求更高时选择post
当向后台索要数据或者简单的安全性要求低是选择get

三、标签<input>

用处：<input>标签一般用于给用户输入信息，服务器收集用户输入的信息
一般格式为： <input type="?" name="?" value="?">

1.用户名：<input type = "text" name="username">
和密码框一样都是单行输入框，用于给用户输入账号用户名之类；
2.密码框：<input type = "password" name="password">
用于给用户输入密码，输入后信息会被伪装成小圆点；
如图：

账号输入、密码框输入后成小圆点.png

3.单选框：当 type=radio 时为 “单选框”
例如：
<input type = "radio" name="sex" value="male">男
<input type = "radio" name="sex" value="female" checked/>女
用于给用户选择只能选择一项的选择

①：单选框name属性必须要有，且每个选项的name值必须相同；
②：value属性的值也要有，否则提交后服务器显示的是on，就不能获悉提交的内容是什么

注：checked是为了默认选项
如图：

单项选择，并且默认女.png

4.复选框（checkbox）:当 type=checkbox 时为 “复选框”
<input type="checkbox" name="?" value="?">
例如：
<input type="checkbox" name="hobby" value="sing" >听歌
<input type="checkbox" name="hobby" value="book" >看书
<input type="checkbox" name="hobby" value="run" >跑步
注：同一组选项，name属性必须保持一致；
因：name属性相同则属同一组选项，name属性不同则属于多组选项

如图：

复选框.png

5.文件上传：当 type=file 时为 “上传文件框”
<input type="file" name = "上传文件的在服务器的名字" accept="规定文件类型">，用于给用户上传文件
注： < accept="image/png" > 意思是可上传文件的类型为 “ png格式的图片 ”，即 < accept="?" > 属性的意思是规定可上传文件的类型。
如图：

文件上传框.png

6.隐藏域：当 type=hidden 时为 “隐藏”
<input type="hidden" name = "上传到服务器该数据的key" value="上传到服务器该数据的值">
注：此条信息不做展示，所以用户不会看到；hidden 用于暂存信息、安全校验

7.按钮：当type=button时为“按钮”
<input type="button" value="Buttom" >
如图：

按钮.png
注：点击按钮不会向服务器提交表单数据信息

8.提交表单：当type=submit时为“提交表单”
<input type="submit" value="submit" >
如图：

提交.png
注：点击按钮会向服务器提交表单数据信息

9.重置表单:当type=reset时为“重置”
<input type="reset" value="重置" >
如图：

重置表单.png

注：点击按钮会重置表单内所有信息为初始状态，清空表单内填写的信息

四、下拉菜单标签<select><option>

用法：select标签---下拉菜单

<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" >上海</option>
<option value="hangzhou">杭州</option>
</select>

如何设置下拉菜单默认选项？使用selected即可，默认选择上海如下所示：

<select name="city">

如图：

默认下拉菜单.png

五、文本域<textarea>——多行文本

<textarea name="article"> 你好，这里是饥人谷！ </textarea>

注：多行文本框可拖动大小，需要使用其他代码锁住多行文本框的大小；多行文本框敲击回车可以换行，应注意与 type=text 的区别

如图：

表单.png

六、label标签---定义 <input> 元素的标签，一般为元素标签的标题

<label>用户名</label>
<input type="text" name="username" >

<label for="username">用户名</label>
<input type="text" name="username" id="username">

区别是使用第二种编写代码时，点击 “用户名” 标题，“用户名输入框” 可变为选中状态；
而使用第一种编写代码时，点击 “用户名” 标题毫无作用

七、<input>的常用属性添加

placeholder：用于提示用户该输入框内容
maxlength：规定输入框的最大输入字数
disabled：该输入框禁止输入

最后

最后表单成型，但是还没测试.png

****文章著作权归饥人谷_Shirley和饥人谷所有，转载须说明来源****