学习随笔—表单

学习随笔——表单——2020.11.12

（一）表单概述
1.表单用途：

• 用户注册
• 用户登录
• 信息搜索
• 后台登录

2.表单的组成：（表单有三个基本组成部分）

• 表单标签：（form标签，form属性中包含了处理表格数据的URL以及数据提交到服务器的方式）
• 表单域控件：包含了文本框，密码框，隐藏域，多行文本框，复选框，单选框，下拉选择框和文件上传框等
• 表单按钮：包括提交按钮，重置/复选按钮和一般按钮，用于将数据传送到服务器上，还常用表单按钮配合执行javascript脚本

3.表单及表单域控件：

• form 表单标签
• input 标签（根据input的type值可分为：）
  text（单行文本框）
  password（密码框）
  file（上传文件选择框）
  radio（单选框）
  checkbox（复选框）
  submit（提交按钮）
  reset（重置/复位按钮）
  image（图形按钮）
• select 下拉列表框/下拉选择框（select——option）
  select的子一级标签必须是option
• textarea 文本域/多行文本框

（二）form元素常用属性
1.action属性：

• action：用来指定处理表单数据的服务器端地址
• 数据传递的地址，如<form action="1.html">....</form>
• 当用户单击确认按钮时，表单的内容会传送到另一个文件
• 表单的动作属性定义了目的文件的文件名，由动作属性定义的这个文件通常会对接收到的输入数据进行相关处理

2.method属性：数据的传送方式get（默认，少量数据），post（大量数据）
get,post表单提交的区别：

• 安全性：post更加安全，get不够安全，以为get传值方式会将表单信息显示在url地址栏中
• 便捷性：get传值便捷，可以无需表单直接将数据通过url地址传递，而post传值复杂，需要借助于form表单
• 传输数据的大小：get传值最大不超过1024个字节，而post传递数据的小大理论上没有限制（但是实际上，为了保证服务器端安全和节省空间，服务器端都会有最大允许上传文件的大小设置）

3.name属性：表单名称
4.target属性：指定提交的结果文档显示的位置

• _blank：在一个新的，无名浏览器窗口调入指定的文档
• _self：在当前表单所在浏览器窗口中调入指定的文档
• _parent：把文档调入当前框的直接的父FRAMSET框中，这个值在当前框没有父框时等价于_self
• _top：把文档调入原来的最顶部的浏览器窗口中（因此取消所有其他框架）

5.enctype属性：当表单上传文件时必须要指明该属性，同时method值必须为post,说明表单要提交给服务器的互联网媒体形式。这个属性的缺省值是"application/x-www-form-urlencoded”,当上传文件时该值必须是"multipart/form-data"
备注

• URL也被称为网址
• scheme 定义因特网服务的类型，最常见的类型是http/https（安全）
• host 定义域主机（http的默认主机是www）
• domain 定义因特网域名，比如 www.163.com
• :port 定义主机上的端口号(http的默认端口号是 80）
• path 定义服务器上的路径（如果缺省，则文档必须位于网站的根目录中）
• filename 定义文档/资源的名称
• ？ 变量 = 值

（三）input元素常用属性
1.name属性：
规定input元素的名称，用于对提交到服务器后的表单数据进行标识

• 每个表单控件一定要有name属性，服务器通过该name值，用来识别和接受相应控件提交的数据（或者说就是告知服务器端某个表单域控件传递给服务器端的），该name必须与服务器端保持一致
• 要保证数据的准确性，name必须保证在同一个form表单中独一无二

2.type属性：
input元素常见类型类型：

• text（单行文本框）
• password（密码框）
• file（上传文件选择框）
• radio（单选框）
• checkbox（复选框）
• submit（提交按钮）
• reset（重置/复位按钮）
• image（图形按钮）

3.value属性：
对于不同的输入类型，value属性的用法也不同：

• type = “button”,“reset”,“submit”——定义按钮上显示的文本，一般通常是 “注册”，“登录”，“重置”，“确认”，“搜索”等等
• type = “text”,“password”——可以定义输入字段的初始值，一般来说是由用户在填写表单时自行填写，很少设置初始值，所以此时value保持为空即可
• type = “checkbox”,“radio”——必须给value属性赋值，该值就是要提交给服务器端的数据，所以此时value绝对不可以为空
• type = "image”——无需定义value值，value保持为空即可

4.placeholder属性：

• 设置表单提示文字。
• 该提示会在input中未输入文字时显示，并在input中开始输入文字时消失

5.require属性

• 设置必填项属性

6.maxlength属性：定义最多输入的字符数

• 当type = “text”，“password”的时候，该属性才有意义

7.id属性和class属性：

• class属性和id属性用于设置样式，但是id属性更主要是为js做准备

（四）input表单域控件常用类型
1.文本框：主要用于输入单行文本内容

• <input type="text" value=" " placeholder=" "/>
• 常用于：用户名，账号，家庭地址等
• 以前还用于电话，email，网址等信息的输入
• HTML5新特性中增加了url,tell,number,email

2.密码框：主要用于输入一些保密信息<input type="password" />

3.单选框：

• <input type="radio" name="值" checked="cheched" />
• name属性定义复选框的名称，单选框都是以组为单位使用的，在用一组中的选项必须使用同一名称
• checked="checked"表示默认被选中，也可以只写checked
• 一般用于：性别

4.复选框：复选框主要是让网页浏览者在一组选项里同时选择多个选项

• <input type="checkbox" checked="checked" />
• name属性定义复选框的名称，复选框以组为单位使用的，在同一组的选项必须使用同一名称
• checked="checked"表示默认被选中，也可以只写checked，可以有多个默认被勾选的选项
• 一般用于：兴趣爱好，应聘岗位等

5.提交按钮：提交按钮用来将输入的信息提交到服务器

• <input type="submit" value="按钮上显示的文字"/>

6.重置按钮：重复按钮用来重置表单中输入的信息

• <input type="reset" value="按钮上显示的文字"/>

7.普通按钮：

• <input type="button value="按钮上显示的文字"/>
• 普通按钮常配合javascript使用

8.图像提交按钮：

• <input type="image" src="图像地址" />
• 效果如同type=“submit”,该控件单击后将表单会立即被提交

9.文件域：文件域主要是让用户上传文件

• <input type="file" name="uploadfile" />

（五）表单域下拉表框（下拉选择框，下拉菜单选项）

• 语法结构：

<select>
	<option selected="selected">选项1</option>
	<option>选项2</option>
	...
</select>

• selected="selected"是默认被选中的选项，也可以只写selected
• 默认下拉选择框只显示一条，每次只能选择一项，但是也可以设置成多选multiple=“multiple”

<select multiple="multiple">
	<option selected="selected">选项1</option>
	<option>选项2</option>
	...
</select>		

（六）文本域

• <textarea rows="行数" cols="列数" name=" ">初始值</textarea>
• cols属性：定义文本域中输入文字的列数，也就定义了文本域的宽度
• rows属性：定义文本域中输入文字的行数，也就定义了文本域的高度

（七）表单使用过程中的细节:
1.action：提交到服务器端，用来接收数据的地址
2.method：提交方式，主要有两种提交方式——post,get提交
3.get,post表单提交的区别：

• 安全性：post更加安全，get不够安全，以为get传值方式会将表单信息显示在url地址栏中
• 便捷性：get传值便捷，可以无需表单直接将数据通过url地址传递，而post传值复杂，需要借助于form表单
• 传输数据的大小：get传值最大不超过1024个字节，而post传递数据的小大理论上没有限制（但是实际上，为了保证服务器端安全和节省空间，服务器端都会有最大允许上传文件的大小设置）

4.如果要上传附件，一定要在form元素内增加enctype,属性值必须是：multipart-data,modthod必须是post（默认form表单的提交数据方式为get，而不设置enctype属性时,其默认值为：application/x-www-form-urlencoded）
5.每个表单控件一定要有name属性，服务器通过该name值，用来识别和接受相应控件提交的数据，该name必须与服务器端保持一致
6.单选，多选，下拉列表提前将value值写好，否则服务器端无法接受到该控件提交的数据
7.每个表单控件要起id，目的有两个：一是为了给该控件增加样式，二是为js操作该控件做准备

本文地址：https://blog.csdn.net/weixin_43402353/article/details/109636795