html的表单标签(上):form标签和input标签

previewfile_1270178398

表单标签

表单是让用户输入信息的重要途径。
用表单标签来完成与服务器的一次交互,比如你登录QQ账号时的场景。

image-20240216200709856

image-20240216200729596

表单分成两个部分:

  • 表单域:包含表单元素的区域,用form标签来表示。
  • 表单控件:输入框,提交按钮等,用input标签来表示。

form标签

<form action="test.html">
	... [form 的内容]
</form>

描述了要把数据按照什么方式,提交到那个页面中。

input标签

是一个单标签,各种输入表单控件, 比如单行文本框,按钮, 单选框, 复选框.

  • type(必须有), 取值种类很多,比如button, checkbox, text, file, image, password, radio 等.
  • name: 给 input 标签起了个名字, 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
  • value: input 中的默认值.
  • checked: 默认被选中(用于单选按钮和多选按钮) .
  • maxlength: 设定最大长度.

可以通过对type进行对应的取值,来控制input的类型

单行输入文本框

示例代码:

image-20240217225527522

运行效果:

image-20240217230307470

密码框

示例代码:

image-20240218121157249

运行效果:

image-20240218114436271

单选框

单选框之间必须具备相同的name属性, 才能实现多选一效果

示例代码:
image-20240218122817541

运行效果:

image-20240218121526698

性别<input type="radio" name="gender"><input type="radio" name="gender" checked="checked">

上述代码会默认选择加了checked="checked"的选项,即会默认选择女

性别<input type="radio" name="gender" checked="checked"><input type="radio" name="gender" checked="checked">

如果2个选项都加了checked="checked",默认选择那个选项,取决于浏览器,不同的浏览器有不同的选择。

复选框

示例代码:

image-20240218161728143

运行效果:

image-20240218161552115

普通按钮

按钮通常和 JS 代码搭配使用

示例代码:

image-20240218162436823

运行效果:
image-20240218162608025

提交按钮&清空按钮

提交按钮和清空按钮必须放到 form 标签内。
提交按钮通常情况下,将用户在前端提交的数据提交到服务器上,清空按钮点击后会将 form 内所有的用户输入内容重置。

image-20240218163847431

点击提交之后的效果
image-20240218163930993

重置的效果
image-20240218164004885

选择文件

点击选择文件, 会弹出对话框, 选择文件
示例代码:

image-20240218164652058

运行结果:
1.image-20240218164749448

2.image-20240218164822905

3.image-20240218164851907

相关推荐

  1. HTML 标签

    2024-02-20 02:48:01       10 阅读
  2. HTML世界之input标签

    2024-02-20 02:48:01       22 阅读
  3. 前端---标签

    2024-02-20 02:48:01       39 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-20 02:48:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-20 02:48:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-20 02:48:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-20 02:48:01       20 阅读

热门阅读

  1. 【Webpack】基本使用和概述

    2024-02-20 02:48:01       27 阅读
  2. Linux调试器---gdb

    2024-02-20 02:48:01       28 阅读
  3. MySQL的 4 种连接查询

    2024-02-20 02:48:01       24 阅读
  4. ChatGPT魔法2:两大准则

    2024-02-20 02:48:01       29 阅读
  5. MySQL全量备份

    2024-02-20 02:48:01       24 阅读
  6. linux查看磁盘占用命令

    2024-02-20 02:48:01       21 阅读
  7. 【LeetCode每日一题】单调栈 901股票价格跨度

    2024-02-20 02:48:01       33 阅读