表单标签
使用场景

一、表单标签

1. 用法:
form标签
2. 作用:提交数据收集数据发送到服务器
3. 属性:action/method
  • action: 规定表单提交的信息存储的文件以及它的地址

    该表单提交的信息就会存储到xxx.php文件里

  • method: 规定表单提交方式,主要是get/post,默认是get。
    注意:get和post不同点
    ①:提交数据方式不同,get在url看到提交的数据,post会在url隐藏提交的数据。相对来说post安全性也比较高一点。
    ②:容量不同:get只能提交少量的数据,容量在1K以;post可以提交大量数据,但是不能超过服务器容量,post完整性也会好一点。
    ③:用法不一样,get主要是关键词提交,所以后台搜索数据建议get,传输数据建议post。

二、 输入标签input

  • 作用:让用户输入内容,服务器收集用户输入的信息。

  • type属性:text / password / checkbox / radio / hidden / button / submit / reset / email / file / number / search / tel / date / time / range / search / url

  • 其他属性:name / placeholder / autofocus / checked / disabled / required / tabindex

三、input标签的用法

  • input标签的type属性
  1. 输入类型

   
 
在这里面可以输入内容
  1. 密码框 ",用户输入密码,输入后信息会被伪装成小数点;
密码输入
  1. 复选框 ",
    ①:复选框里面的name可以不一样,但是一样方便分类;
    ②:添加value方便后台区分你要勾选的选项。

    复选框

  2. 单选框,用户只能选择一项。
    ①:name属性一定要有,而且每个选项的name必须相同,相同就会有排斥的作用,只能选一个才能实行单选;
    ②:value属性的值也要有,方便后台服务器区分,不添加后台服务器会显示on,不能获悉提交的内容。

    单选框

  3. 隐藏

  4. 提交按钮:
    ①:点击时会把当前form表单所有内容提交,其他表单内容不会提交。
    ②:可以修改value值改变按钮的显示文字。

提交按钮
  1. 清空重置:点击即可重置表单内的内容。
重置按钮
  1. 设置邮箱格式:用户输入不是邮箱格式会有提示。

    邮箱格式

  2. 文件选项

    点击选择文件就会跳转文件选项

  3. 数字输入框

    通过上下选择数字,只有数字

  4. 搜索框
    ①:输入时特色是右边有一个x,没有输入就没有;
    ②:点击x就可以清空输入框

搜索框
  1. 日期选择框

    日期选择框

  2. 时间选择框

    时间选择框

  3. 进度条

可以左右滑动
  1. 网址输入框
    输入不是网址就会有提示
  • input 标签其他属性的用法
  1. 用户名:,单行输入框输入用户名账号之类,任何input表单接收用户输入的地方需要有name,没有name提交不了给服务器。

   
    
 
输入用户名提交

2.输入框背景提示

输入框背景提示
  1. 获取焦点
获取焦点

4.禁止操作

form action="/abc.html" method="GET">
   
    
 
输入框已经变成灰色无法输入
  1. 提交时提示用户输入信息
点击提交时,提示用户输入信息,不提交空白信息
  1. 切换顺序 ,序号越大越靠后,0是最后,-1是不切换
顺序:用户名-地区-性别

四、 其他标签

1.激活输入框
用法
①:给输入框起名,并且点击这个名字就会自动跳转到该输入框,②:有for属性,链接该标签要填写id属性,并且id属性的值和for属性的值要相等。

label激活输入框l

2. 多行输入文本