HTML基础-03-表单一

---

前言

表单标签一

---

一、应用场景

• 应用场景：登录，注册，搜索时会用到
• 如图

现阶段应用较少，可以慢慢记忆

二、input系列标签

基本使用

• 场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
• 标签名：input（input标签可以通过type属性值的不同，展示不同效果）
• type属性值
• 实践
  1.input
  
  因为不管写在哪都会在同一行，那样非常恐怖，所以要写下一个标签需要加上br
  2.password
  
  
  没写br的下场
  
  
  3.radio、checkbox、file
  
  

占位符（提示信息）

• 场景：在网页中显示输入单行文本的表单控件（这个解释好复杂，就是如下图的意思）
  
  密码的提示字就是该标签的用途
• 常用属性：
  加在type后面的属性
• 实践
  
  
  加了该属性后原来拥有的type的属性也不会消失

单选功能和默认选中

• 场景：在网页中显示多选一的单选表单控件
  

• type属性值：radio

• 常用属性：

• 注意点：name属性对于单选框有分组功能；有相同name属性值的单选框为一组，一组中只能同时有一个被选中

• 实践：
  1.name用于多选一
  2.checked用于自动选择
  
  
  试试多选：
  
  

文件选择

• 场景：在网页中显示文件选择的表单控件（这个其实说的有点高深一时间想不明白）
• type属性值：file
• 常用属性：
  就是在选文件的时候可以同时选很多个的意思
• 实践：
  
  若是没有用这个只能选择一个

按钮——input版本

• 场景：在网页上显示不同功能的按钮表单控件
• type属性值：
  
• 注意点：如果需要实现以上按钮功能，需要配合form标签使用
• form使用方面：用form标签把表单标签一起包裹起来即可（要不然按钮和内容没有连接关系，单独的个体没有办法发挥按钮的作用）
• value使用方法：加了value可以改变按钮里的字
• 实践：
  1.submit
  

2.reset


但此时点击重置是没有用的，因为按钮和上面的内容没有联系

form标签

所以要给一个表单域
也就是form
这个没办法给效果图，但是确实重置之后消失了
3.button


value属性

• 好像属性的格式都是
  xxx=“xxx”

三、button按钮标签

• 场景：在网页中显示用户点击的按钮
• 标签名：button
• type属性值（同input的按钮系列差不多）：
  
• 注意点：谷歌浏览器中button默认是提交按钮；button标签是双标签，更便于包裹其他内容，一些文字图片之类的
• 实践！！！
  
  
• 这是一个很有用的标签，搭配上js可以做出任何功能的按钮，很棒！

---