[Web 前端] 003 html 表单标签

目录

• 表单标签
  • 1. form 标签
  • 2. 表单控件
    • 2.1 登录框
    • 2.2 单选按钮
    • 2.3 多选按钮
  • 3. select 标签
  • 4 文件上传
  • 5. textarea 标签
  • 6. 按钮
  • 7. 隐藏域
  • 8. 图片
  • 9. 滑动条
  • 10. 取色
  • 11. 数字
  • 12. 日期
  • 13. email

表单标签

1. form 标签

<!-- form 标签：划定一个表单区域
    action:  数据的提交地址
    method:  提交方式
    get:    （默认方式）通过 url 地址传输数据，数据会显示在 url 地址栏中，相对来说不安全
             传输数据有大小限制，不同浏览器传输的数据大小不同

    post:    数据不通过 url 地址传参，相对来说较安全
             数据传输没有具体的大小限制
             一般表单指定使用 post 方式提交数据

    enctype: 如果表单当中有文件上传，必须添加这个属性
             指定属性值为 multipart/form-data 用于文件转码 -->
<form action="" method="post" enctype="multipart/form-data"></form>

2. 表单控件

type 的参数	释义
text	单行的输入字段，可输入文本，默认宽度为 20 个字符
password	密码框
radio	单选按钮
checkbox	多选按钮
file	输入字段和 "浏览"按钮，供文件上传
submit	提交按钮，会把表单数据发送到服务器
button	按钮
reset	重置按钮
hidden	隐藏输入的字段
image	图片按钮

type 的新参数	释义
range	滑动按钮
color	取色按钮
number	数字按钮
date	日期按钮
email	email 地址的输入域
... ...

2.1 登录框

<!-- input
    type: 指定表单类型
        text:     普通文本
        password: 密码框

{username:york, gender:1, love:[s, b, p], education:3} -->
<form method="post" enctype="multipart/form-data">
    用户名：<input type="text" name="username" placeholder="请输入用户名"> <br>
    密 码：<input type="password" name="password"> <br>
</form>

• 效果

用户名：

密 码：

2.2 单选按钮

<!-- type="radio"

    必须有 name 属性和 value 属性
    一组单选框 name 属性的值必须相同 -->
<form method="post" enctype="multipart/form-data">
性别:
    <input type="radio" name="gender" value="1" checked> 男
    <input type="radio" name="gender" value="0"> 女
</form>

• 效果

性别:
男
女

2.3 多选按钮

<!-- type="checkbox"

    必须指定 name 属性和 value 属性
    一组多选框 name 属性的值要相同 -->
<form method="post" enctype="multipart/form-data">
    爱好: <br>
    <input type="checkbox" name="hobbies[]" value="s" checked> 足球 <br>
    <input type="checkbox" name="hobbies[]" value="b"> 羽毛球 <br>
    <input type="checkbox" name="hobbies[]" value="p"> 乒乓球 <br>
</form>

• 效果

爱好:

足球

羽毛球

乒乓球

3. select 标签

<!-- 下拉选项框必须配合 option 来使用 -->
<form method="post" enctype="multipart/form-data">
    学历:
    <select name="education" >
        <option value="0">小学</option>
        <option value="1">初中</option>
        <option value="2">高中</option>
        <option value="3">大学</option>
    </select>
</form>

• 效果

学历:

小学
初中
高中
大学

4 文件上传

<!-- type="file" -->
<form method="post" enctype="multipart/form-data"> <!-- 上传文件时，enctype 不可少 -->
    请选择要上传的文件：<input type="file" name="file">
</form>

• 效果

请选择要上传的文件：

5. textarea 标签

<!-- 多行文本输入 -->
<form method="post" enctype="multipart/form-data">
    请输入个人说明: <br>
    <textarea name="text" id="">请输入个人信息</textarea> <!-- 按住左下角可以改变输入框的大小 -->
</form>

• 效果

请输入个人说明:

请输入个人信息

6. 按钮

<!--
    type="submit"
    type="button"
    type="reset"

    适用范围：botton > input button > input submit-->
<form method="post" enctype="multipart/form-data">
    <input type="submit" value="确定"> <br>
    <input type="button" value="按钮"> <br>
    <input type="reset" disabled> <br>
    <button>提交</button>
</form>

• 效果

提交

7. 隐藏域

<!-- hidden: 不需要用户查看和填写的信息 -->
<form method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" value="0">
</form>

• 效果

下面有一个隐藏的 input

8. 图片

<!-- type="image" -->
<form method="post" enctype="multipart/form-data">
    <input type="image" src="xxx.jpg" alt="xxx.jpg">
</form>

• 效果：略

9. 滑动条

<!-- type="range" 此处使用 ie 效果较好 -->
<form method="post" enctype="multipart/form-data">
    <input type="range" min="0px" max="500px" value="100px" step="100px">
</form>

• 效果

10. 取色

<!-- type="color" -->
<form method="post" enctype="multipart/form-data">
    <input type="color">
</form>

• 效果

11. 数字

<!-- type="number" -->
<form method="post" enctype="multipart/form-data">
    <input type="number" min="1" max="5">
</form>

• 效果

12. 日期

<!-- type="date" -->
<form method="post" enctype="multipart/form-data">
    <input type="date">
</form>

• 效果

13. email

<!-- type="email" -->
<form method="post" enctype="multipart/form-data">
    <input type="email">
</form>

• 效果