前端(三)——HTML之表单

1. 表单分类

• 注册

• 登录
  
• 搜索框

2. 基础表单

• form 表单
  action： 提交地址
  method：提交的方式（post）

• 提交请求：
  携带的参数
  key: 控件的name。这个属性不要忘记
  get：携带参数，参数可以在url中看到，不安全，大小有限
  https://www.baidu.com/?username=kuangshen&password=123456
  post：参数不可见、安全，大小没有限制 （表单提交常用方式post）

• 输入框均要写在表单内
  input 标签
  name： 必须写上
  type：
  text ： 文本框
  password： 密码框
  submit： 提交按钮
  reset： 重置

• 案例代码
  

• 运行结果
  

3. 表单元素

• 所有表单元素都要写在form表单中，必须加上name属性，否则提交的时候取不到值。

（1）文本框

• type=“text”
  value ：文本框默认的初始值
  size： 文本框的长度
  maxlength： 文本框的最大输入长度
  

（2）密码框

• type=“password”
  size： 密码框的长度
  

（3）单选按钮

• type=“radio”
  value： 表单提交的值
  name： 名字相同，则自动分组，必须要分组
  checked： 默认选中
  disabled： 禁用
  注意事项：默认没有值，需要在input type=“radio” 后增加单选框的属性
  

（4）多选框

• type=“checkbox”
  name： 必填项，如果是分组，则名称一致
  value： 表单提交的值
  checked： 默认选中
  disabled： 禁用
  注意事项：默认没有值，需要再input type=“checkbox” 后增加多选框的属性
  

（5）下拉列表框

• select
  name： 组件名字 必填
  size: 显示的数量，默认为1

  • option： 选项
    value 必填
    option标签中间写下拉框的值
    selected： 默认选中
    

（6）按钮

• value：按钮上的文字
  

（7）文本域

（8）文件域

• 表单，需要支持提交复杂文件
• 当使用文件域file时，必须在form的标签中说明编码方式“enctype=“multipart/form-data”。这样，服务器才能接收到正确的信息。

（9）邮箱

（10）网址

（11）数字

• 商品数量，计数 type=“number”
  最小值 min
  最大值 max
  步长 step

（12）滑块

（13）搜索框

• 总运行页面
  

4. 表单应用

（1）隐藏域

（2）只读和禁用

（3）标注

• 通过 for=“name” 来链接到 表单中的指定ID
  
• 运行页面
  

（4）初级表单验证

• 进行初级表单验证的原因
  
• 默认提示
  – placeholder=“必须是url格式” 默认提示，告诉用户应该这么做
  
• 必填
  –required必须要填写这个字段
  
• 正则表达式
  
• 运行页面
  

5. 案例练习

• 人人网的原注册页面
  
• 案例代码
  
• 测试结果
  
  不足：
  （1）生日只能一个个数字手动填写
  （2）验证的图片不会添加