自学web前端开发4（HTML）

一、表单标签

登录注册（输入账号、密码等）、填个人信息、搜索等功能需要用表单标签来实现

1.1 input系列

input 是一个单标签，在网页中用于收集用户信息的表单效果

1.1.1 type属性

input 标签可以通过type属性值的不同展示不同的效果

 
1 text 文本框，用于输入单行文本
 文本框： 
 
2 password 密码框，用于输入密码
 密码框： 
 
3 radio 单选框，用于多选一
 单选框： 
 
4 checkbox 多选框，用于多选多
 多选框： 
 
5 file 文件选择，用于之后上传文件
 文件选择： 
 
6 submit 提交按钮，用于提交
  
 
7 reset 重置按钮，用于重置
  
 
8 不同按钮，默认无功能，需要配合js添加功能
 

效果如下

1.1.2 placeholder属性与占位符

input标签的placeholder属性能在文本框中提示用户输入的内容

 账号： 
 密码：

效果如下

1.1.3 单选框radio（name属性和checked属性）

单选的具体属性有

1. name 分组，属性值为组名，有相同属性值的单选为一组
2. checked 默认选中

 性别： 男  女 其他

实际上，多选 checkbox的属性也与之类似，如

 性别： 男  女 其他

1.1.4 文件选择file(mutiple属性)

file的mutiple属性能控制进行多文件选择

1.1.5 按钮与表单域

三种按钮（type的属性值）

1. submit 提交
2. reset 重置
3. button 普通按钮

这些按钮功能在一个表单域（form）内实现

表单域是一个双标签，控制了一个表单整体

 
  账号： 
 密码： 
 
    

注意其中的value属性的属性值为按钮内的文字

1.2 button按钮标签

在表单中，可以直接把button作为一个标签（双标签），其type属性值有submit/reset/button等，效果与input的按钮系列相同

 
  账号： 
 密码： 
 
 普通按钮 也是普通按钮 提交按钮 重置按钮 菜单按钮 

1.3 select下拉菜单标签

下拉菜单是在网页中提供多个选择项的表单控件

标签组成

• select标签 下拉菜单的整体
• option标签 下拉菜单的每一项

  常见属性

  • selected：默认选中

      北京 上海 广州 深圳 

    默认第一个option具有selected属性

    1.4 textarea文本域标签

    在网页中提供可输入多行的表单控件

    标签为textarea（双标签）

    常见属性：

    • cols：文本域的可见宽度
    • rows：文本域的可见高度

      注意：实际的设计一般使用CSS

       
        
       重置 

      1.5 label标签

      用于绑定内容与表单标签

      1.5.1 使用方法一

      1. 使用label标签把内容（文本等）包裹起来
      2. 在表单标签上添加id属性
      3. 在label标签的for属性中设置为对应的id属性

      1.5.2 使用方法二

      1. 直接把label标签把内容和表单标签一起包裹起来
      2. 把label的for属性删除

       性别： 男性 女性

      可以实现在点击“男性”或“女性”的文字时选中相对应的表单