【HTML】复习笔记（三）HTML中的表单

HTML

HTML的表单

一、FORM元素

form元素用来定义。

<form acton="" method="" enctype=""></form>

作用：
用于数据的交互

属性：

• action 访问接口的地址

指定表单被提交到某一服务器页面上，省略时默认为当前页面

• method 表单提交的方式

规定提交时HTTP的方法：POST和GET

TIPS：post和get方式的区别？

get方法 
   1. 会将请求的数据拼接再浏览器的地址栏上，不安全
   2. 请求数据的大小有限制
post方法
   1. 会将数据放在请求体中，比较安全，不会被别人看到
      请求行+请求头+请求体
   2. 对于请求数据的大小一般没有限制

• enctype 编码类型

规定表单数据编码类型：
application/action-www-form-urlencoded ：在发送前编码所有字符（默认）
multipart/form-data：不对字符编码

TIPS：添加文件附件时需注意！

添加文件附件时，enctype不能为application/action-www-form-urlencoded
必须为enctype=" multipart/form-data"
且 method="post"

---

二、表单组件

input

<input> 元素根据type属性来改变形态

<input  type="" name="">

type属性有以下几种：

• text
  供文本输入的单行输入字段
• password
  密码字段，会被做掩码处理

• radio
  定义单选按钮，name相同则互斥，checked默认选择

  <label> 可以将单选按钮radio的圆圈和文字合并为一个整体，便于用户使用

• checkbox
  定义复选框， name:组名；value:唯一id ； checked:默认选择
• reset
  定义重置表单按钮
• submit
  定义提交表单的按钮，value属性可以定义按钮文本
• button
  定义按钮
• file
  文件附件按钮

select

下拉列表

<selected name="food">
    <option value="sk">烧烤</option>
    <option value="hg">火锅</option>
    <option value="nc">奶茶</option>
</selected>

textarea

定义多行输入字段 ，cols=""（列） rows=""（行）

---

三、HTML新增

1.input中type类型

• time 允许用户选择时间
• date 包含日期的输入字段
• week 允许用户选择周和年
• month 选择月份和年份
• datetime 允许用户选择日期和时间（有时区）
• datetime-local 允许用户选择日期和时间（无时区）
• email 包含电子邮件地址的输入字段
• number 包含数字值的输入字段
• range 包含一定范围内的值的输入字段
• search 用于搜索字段
• color 包含颜色的输入字段
• tel 包含电话号码的输入字段
• url 包含 URL 地址的输入字段

2.input中属性

• autocomplete 属性规定表单或输入字段是否应该自动完成
• novalidate 属性规定在提交表单时不对表单数据进行验证
• autofocus 属性在页面加载时自动获得焦点
• placeholder属性向用户显示描性说明或者提示信息
• min / max 属性将 range 输入框的数值输入范围限定在最低值和最高值之间
• step 特性能够制定输入值递增或递减的梯度
• required 属性规定此项必镇
• pattern 属性规定用于检查 <input> 元素值的正则表达式
• multiple 属性规定允许用户在 <input> 元素中输入一个以上的值，用于email 和 file

---

<iframe>
可以引入别的网页，比如天气，时间，股票

<iframe src="http://i.tianqi.com/index.php?c=code&id=17"  style="border:solid 1px rgb(255, 255, 255)"  frameborder="0" marginwidth="0" marginheight="0" scrolling="no">