HTML——表单

最新推荐文章于 2024-07-25 11:52:08 发布

小小橙煦缘

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量767

点赞数 23

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_77737374/article/details/140155636

版权

六、表单

6.1 表单简介

什么是表单
- 表单表示文档中的一个区域，此区域包含交互组件，接收用户输入等操作，从而实现向 Web 服务器提交信息
表单意义
- 实现交互
- 终端用户
- 服务器
- 收集客户端信息
表单结构
- 表单域
  - 表单元素的容器，用来定义了表单和确定表单行为的属性
- 表单元素
  - 表单元素也叫表单控制，包括文本框、密码框、单选框、筛选框、下拉列表框等控件构成

6.2 表单

功能
- 表单元素的容器
- 点击提交时，会将表单元素的内容打成包提交给服务器
用法
```
<form>
    
</form>
```
常用属性

表单域: 容器，所有的表单元素，如文本框、单选项、下拉框等都必须放在form标签内

常用属性:

name 表单名称 , 区分不同表单 (id) name在一个页面中是可以重复的，id只能出现1次

method: 表单提交方式

GET(默认) ：表单元素以name=value方式通过?附加在url后上传给服务器 ,

优点: 直观、简洁

缺点: 不安全,长度限制,无法带附件

小结：用于查询

POST ：将表单所有元素的数据打成一个数据包一起发送到服务器

特点：安全

小结：用于登录、注册等

action : 当提交表单时的处理程序

enctype: 表单提交数据的格式

application/x-www-form-urlencoded : 默认表单POST提交方式

multipart/form-data ：只要表单中带附件就必须使用该方式

6.3 表单元素

input
- 什么是 input
  - input称为文本输入域 , 最基本的表单元素(组件),可以接收用户输入任何类型的数据
- 用法
```
< input type="text|password|radio|checkbox|file|number|date" value="" name="" checked />
```
- 常用属性
  - type: text/password/radio/checkbox/submit/reset/button/file
  - value:
    - 文本框和密码框：默认值或用户输入的值
    - 单选框和复选框：选中的值
  - size和maxLength
    - size : 文本框或密码显示字符的个数
    - maxlength: 文本框或密码输入字符最大数字
  - checked
    - 单选框或复选框选中状态,如果添加了checked属性，说明选中的，如没有添加checked则为必选中
    - checked属性为布尔属性，加或不加，没有属性值(布尔属性)
  - placeholder: 在没有内容时的提示文本（input type="text/password" textarea）
textarea
- 什么是 textarea
  - textarea称为文本域，也称为多行文本框，用来存储多行文本数据
- 用法
```
<textarea rows="" cols="" value="" placeholder="" ></textarea>
```
- 常用属性
  - rows
  - cols
select
- 什么是 select
  - select称为下拉列表框 , 可以让用户选择众多选项中的一个，而不需要占用用户界面的太多空间
- 用法
```
<select>
    <option value="1">xxx</option>
  <option value="2" selected>xxx</option>
    <option value="3">xxx</option>
</select>
```
- 常用属性
  - selected
  - value
  - multiple

select中至少应包含一对option

option中出现selected时，当前项即为默认选中项

默认情况下，select组件只能选择一项 , 可以通过multiple实现多选

例子：

 <form name="frmMain">
      <!-- 表单元素 -->
      <!-- 
        input : 用来接收用入输入或选择的, 通过type属性决定
        type: 
            text: 普通文本框
            password: 密码框
            radio: 单选按钮
            checkbox: 复选框
            file : 文件域
            date: 日期
        常用属性
          checked: 单选框或复选框选中状态
          name: 表单元素名称，同一组的单选框和复选框必须同名
          accept: 接收文件MIME类型 , MIME : 互联网文件类型 格式 主类型/子类型 , 该属性只会用在type=file文件域元素上
          value : input的输入或选中值
          placeholder: 当文本框value为空时提示信息
          size : 文本框字符显示的长度 , 只用在input=text/password上
          maxLength : 存储最大字符数
      -->
      <div>
        普通文本框:<input
          type="text"
          name="username"
          value="admin"
          size="50"
          maxlength="10"
        />
      </div>
      <div>
        密码框:
        <input type="password" name="password" placeholder="请输入密码" />
      </div>
      <div>
        单选框:
        <input type="radio" checked name="sex" value="1" />男
        <input type="radio" name="sex" value="2" />女
      </div>
      <div>
        复选框:
        <input type="checkbox" value="1" name="chk" checked /> 吃
        <input type="checkbox" value="2" name="chk" /> 喝
        <input type="checkbox" value="3" name="chk" checked /> 玩
        <input type="checkbox" value="4" name="chk" /> 乐
      </div>
      <div>文件域(头像): <input type="file" accept="image/*" /></div>
      <div>日期: <input type="date" /></div>
      <div>数值: <input type="number" /></div>
      <!-- 
        select  ： 下拉框， 可以实现单选框和多选框双重功能
        常用属性
          value: 选中的值
          selected: 选中状态,同checked
          multiple
      -->
      <div>
        下拉框:
        <select>
          <option value="1">高中</option>
          <option value="2" selected>大专</option>
          <option value="3">本科</option>
        </select>
      </div>
      <!--
        textarea 文本域 ： 多行文本框 
        常用属性:
          rows: 行数
          cols: 列表
          value : 输入的值
        -->
      <div>简介: <textarea rows="6" cols="40"></textarea></div>

      <!-- 
        button : 按钮 , 按钮的功能由type类型的值来决定
        常用属性
          type: 按钮类型
              submit : 提交表单
              reset: 表单初始状态
              button: 普通按钮，点击时通过要结构JS来实现特定

      -->
      <button type="submit">提交</button>
      <button type="reset">重置</button>

      <button type="button" id="btn">button</button>
    </form>

表单辅助元素
- label
  - 为表单元素定义标注
  - 通常会使用for属性被标注的控制实现绑定
- button
  - 按钮元素,类似于 input type="button|submit|reset"
  - 推荐使用 button 代替 input
表单辅助属性
- readonly: input元素只读，不能修改
- disabled: button元素禁用，不再支持用户操作

例子：

<body>
 <h2>label标签</h2>
    <div>
      <!-- 
        for: label绑定表单元素 
        文本框、密码框无须将表单元素放在label内
        单选框和复选框推荐放在label内,比如此时点击男，女字体即可实现勾选
      -->

      <label for="phone">手机号码: </label>
      <input type="text" id="phone" />
    </div>
    <div>
      性别:
      <input type="radio" name="sex" value="1" checked id="rdoMan" />
      <label for="rdoMan">男</label>
      <input type="radio" name="sex" value="2" id="rdoWoman" />
      <label for="rdoWoman">女</label>
    </div>
    <div>
      学历:

      <label><input type="radio" name="rdo" value="1" />大专</label>
      <label><input type="radio" name="rdo" value="2" />本科</label>
      <label><input type="radio" name="rdo" value="3" />小学</label>
    </div>
    <hr />
    <h2>readonly : 只读, 通常用文本框和密码框中，表单元素只能读取不能修改</h2>
    <!-- readonly是布尔偶数, 无须赋值，只要出现即为生效 -->
    <div>
      <input type="text" readonly />
    </div>
    <h2>disabled: 禁用的，通常用在button上，按钮不支持点点了</h2>
    <form action="action.html">
      <button disabled>提交</button>
    </form>
</body>

小小橙煦缘

关注

23
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
HTML——表单

什么是表单表单表示文档中的一个区域，此区域包含交互组件，接收用户输入等操作，从而实现向 Web 服务器提交信息表单意义实现交互终端用户服务器收集客户端信息表单结构表单域表单元素的容器，用来定义了表单和确定表单行为的属性表单元素表单元素也叫表单控制，包括文本框、密码框、单选框、筛选框、下拉列表框等控件构成。
复制链接

扫一扫