HTML基础---表单

HTML基础—表单form

1.form作用

1. 提供可视化的输入控件
2. 收集用户输入的信息，并提交请求给服务器(干了两件事)
   总结：
   form自带提交请求和收集数据的功能
   ajax提交请求，需要自己去收集数据
   使用ajax就不要使用form

2.form的组成

前端：提供表单控件，与用户交互的可视化控件
后端：后台的接口对提交的数据进行处理

3.form表单的使用

• 语法
  1. action：定义表单提交时发送的动作(向哪个url发送请求)

  如果action不写，或者action没有值，默认把请求发给本页面

  2. method：定义表单的提交方式

     • get方法(默认值)
       特点：特点明文提交，提交的内容会显示在地址栏上
       get提交的数据，有大小限制，最大2kb
       使用时机：向服务器要数据的时候使用

     • post方法
       特点：隐式提交，提交的内容不会显示到地址栏
       post提交没有大小限制
       使用时机：要传输数据给服务器的时候使用

     • 其他的方法 — 使用form表单，目前不许使用delete/put/option (delete put option-ajax使用这些方法)

  3. enctype：指定表单数据的编码方式，允许将什么样的数据提交给服务器
     取值:
     1. text/plain (一个整体) 允许提交普通字符给服务器(-,_)
     2. multipart/form-data 允许提交文件(包括字符)给服务器
     3. application/x-www-form-urlencoded 可提交任意字符给服务器(文件不能提交)(&=*)
  • form的属性

4.表单控件 – 在form表单中，能够进行交互的可视化控件

• 分类
  • input标签 基础9种 h5新标签10种
  • textarea多行文本域
  • select和option下拉选项框
  • 其他元素
• input元素

<input type= "">

• 属性:

1. type 指定input元素的类型
2. name 为控件定义名称，把名称提供给服务器端使用，如果form表单想提取
   数据，必须写name属性(没有数据提交不了)
3. value 控件的值，就是传递给服务器的值(一般都是在提交固定值时使用,ex:性别)
   例外:在button中使用的时候，value是按钮下的文本
4. disabled (禁用/不可用)不能修改，也不可提交只能看
   disabled为无值属性，使用时可不写值

1.文本框和密码框

• 文本框：type="text"input默认是文本框
  (当只写一个input或者当input后单词拼写错误时都会默认为文本框)
• 密码框：type="password"
  属性：
  • maxlength设置输入的最大长度 ex: maxlength=“3”
  • readonly只读，无值属性。不能修改但是可提交
  • placeholder占位提示符，默认显示在框内的提示文本
  • autofocus自动聚焦(页面只存在一个，多个只有第一个生效)

2.按钮

• type="submit" 将表单中的数据，收集整理，并发送给服务器(submit：提交)
• type="reset" 将当前表单恢复到初始化的状态
• type="button" 没有功能，配合事件调用js代码

附加知识点: h5中新出的<button>...</button>可替代submit

3.3.单选/复选按钮

• name属性除了作为控件名称以外，还作为控件的分组
• 单选框按钮 type="radio" 必须有value属性才能正确的传递值
• 多选框按钮 type="checkbox"必须有value属性才能正确的传递值
  checked 为无值属性，默认选中的选项

4.隐藏域

• type="hidden"
  想把数据提交给服务器，但是不想显示给用户看（ex：电商项目中对于商品订单编码等）这种数据就放在隐藏域中
  隐藏域：用户看不见，但是也可以提交

5.文件选择框(上传文件时候使用)

• type="file"
  注意：使用文件选择框，需要保证form的属性
  1. method=“post”
  2. enctype=“multipart/form-data”

属性：multiple多重(可多选文本)，无值属性,注意与multipart区分

• 多行文本域
  <textarea></textarea>
  允许录入多行文本
  属性:cols rows 根据计算机硬件的不同，有不同的显示，不准确

• 下拉选

<select name="eat">
	<option>虾球</option>
	<option>麻薯</option>
	<option>汉堡</option>
</select>

<select name="eat">
	<option value="1">虾球</option>
	<option value="2">麻薯</option>
	<option value="3">汉堡</option>
</select>

• 注意：
  如果option没有value属性，提交的select的value就是option选中的内容
  如果option有value属性，提交的select的value就是option选中的value值

  • 属性：
    size="3" size>1 变成滚动选择框
    multiple 滚动选择框时可以多选

• 其他元素

  • label元素
    代替form中span
    文本和表单的关联

    <input type= "radio" name="gender" value="un" id="r3"><label for="r3" >不透露</label>
    	如果不对输入框进行id绑定，那就将输入框嵌入到label元素标签之内
    <label><input type= "radio" name="gender" value="un">不透露</label>
    

  • 为控件分组

    • <fieldset></fieldset> 控件分组
    • <legend><legend> 分组的标题

新增表单元素

1.邮箱 <input type="email" name="uemail">
	提交时验证填写的邮箱格式是否正确
	正确的标准格式：有@符号，并且@符号前后面有内容
	
2.搜索 <input type="search" name="us">
	自带快速清除的小叉叉
	
3.url类型 <input type="url" name="uurl">
	验证以http://或https://开头

4.电话号码 <input type="tel" name="ut">
	移动设备使用时，会自动弹出虚拟键盘

5.数字类型 <input type="number" name="un" max="20" min="10" step="2">
	max="20"   能接收的最大值
	min="10"   最小值
	step="2"   步长
	不在范围内的数字会提示

6.范围类型 <input type="range" name="ur" max="100" min="0" step="1">

7.颜色类型 <input type="color" name="uc">
	出现取色器

8.日期类型 <input type="date" name="ud">

9.月份类型 <input type="month" name="um">

10.周类型 <input type="week" name="uw">