HTML表单

已于 2022-05-15 01:07:31 修改
阅读量113 收藏
点赞数
文章标签： html 前端 css3
于 2022-05-15 01:06:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/toufachangdehen/article/details/124646029
版权

目录

一，表单标签

1.input标签介绍

 1.1input系列标签-文本框

1.2input系列标签-单选框

1.3input系列标签-文件选择

1.4input系列标签-按钮 

2.button按钮标签

3.select下拉菜单标签

4.textarea文本域标签

5.label

一，表单标签

1.input标签介绍

  1. 场景：在网页中显示收集用户信息的表单效果，如：登录页，注册页
  2. 标签名：input
  • input标签可以通过type属性值的不同，展示不同效果
  • type属性值：
标签名type属性值说明
inputtext文本框，用于输入文本
inputpassword密码框，用于输入密码
inputradio单选框
inputcheckbox多选框
inputfile上传文件
inputsubmit提交按钮
inputreset重置按钮
inputbutton普通按钮，默认无功能，之后配合js添加功能

eg：

<body>
  文本框：<input type = "text">
  <br>
  <br>
  密码框：<input type = "password">
  <br>
  <br>
  单选框：<input type = "radio">
  <br>
  <br>
  多选框：<input type = "checkbox">
  <br>
  <br>
  文件上传：<input type = "file">
</body>

 1.1input系列标签-文本框

  • 场景：在网页中显示输入单行文本的表单控件
  • type属性值：text
  • 常用属性

placeholder：占位符，提示用户输入内容的文本。

1.2input系列标签-单选框

  • 场景：在网页中显示多选一的单选表单控件
  • type属性值：radio
  • 常用属性
属性名说明
name分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked默认选中

1.3input系列标签-文件选择

  • 场景：在网页中显示文件选择的表单控件
  • type属性值：file
  • 常用属性：multiple :多文件选择

1.4input系列标签-按钮 

标签名type属性值说明
inputsubmit提交按钮，点击之后数据给后端服务器
inputreset重置按钮，点击之后恢复表单默认值
inputbutton普通按钮，默认无功能，之后配合js添加新功能
  • 注意点：如果需要实现以上功能，需要配合form标签使用
  • form标签使用方法：用form标签把表单标签一起包裹起来即可

代码：

<body>
    <form action=""></form>
    <input type = "text" placeholder="请输入用户名">
    <br>
    <input type = "password" placeholder="请输入密码">
    <br>
    性别：<input type = "radio" name = "gender"> 男 
          <input type = "radio" name = "gender" checked> 女
    <br>
    <input type = "checkbox" checked>
    <br>
    <input type = "file" multiple>
    <!-- 按钮 -->
    <br>
    <input type = "submit" value = "免费注册">
    <input type = "reset">
    <input type = "button" value = "普通按钮">
  </form>
</body>

2.button按钮标签

标签名type属性值说明
buttonsubmit提交按钮，点击之后数据给后端服务器
buttonreset重置按钮，点击之后恢复表单默认值
buttonbutton普通按钮，默认无功能，之后配合js添加新功能

代码：

  <button>我是按钮</button>
  <button type = "submit">提交按钮</button>
  <button type = "reset">重置按钮</button>
  <button type = "button">普通按钮，没有任何功能</button>

3.select下拉菜单标签

  • 场景：在网页中提供多个选择项的下拉菜单表单控件
  • 标签组成：
  1. select标签：下拉菜单的整体
  2. option标签：下拉菜单的每一项
  • 常见属性：selected下拉菜单的默认选中
  <select>
    <option>北京</option>
    <option>上海</option>
    <option selected>成都</option>
  </select>

4.textarea文本域标签

  • 场景：在网页中提供可输入多行文本的表单控件
  • 标签名：textarea
  • 常见属性：

         cols：规定了文本域可见宽度

        rows：规定了文本域可见行数

  •   注意点：右下角可以拖拽改变大小。

5.label

  • 使用方法：

     直接使用label标签把内容（文本）和表单标签一起包裹起来，然后把label标签的for属性删除。

Zhuang
关注
HTML的表单显示
小九九(●'◡'●)
02-25 1911
form标签就是表单 input type=text 是文件输入框 value设置默认显示的内容 input type=password 是密码输入框 value设置默认显示的内容 input type=radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中 input type=checkbox 是复选框 checked="checked"表示默认选中 input ...
html点击出现表单弹窗
lplovewjm的博客
04-22 1万+
在系统中，点击某个按钮如何弹出一个**表单弹窗**并且设置**遮罩层**，如下图所示。
HTML-表单（非常详细）
热门推荐
南劲竹的博客
08-31 7万+
  表单语法 &lt;form method="post"（规定如何发送表单数据 常用值：get|post） action="result.html"&gt;（表示向何处发送表单数据） &lt;p&gt; 名字：&lt;input name="name" type="text" &gt; &lt;/p&gt; &lt;p&
利用HTML表单标签编写一个注册页面
java面试笔试
09-10 1万+
今天我们来写一个注册页面form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构:页面结构大体就是这样子的~表单标签:&lt;form action="#...
html的练习之用户注册表单
weixin_51232274的博客
09-05 2618
前端 用户注册表单
html 表单
weixin_64195420的博客
03-22 3436
input类型 用户框： // input 默认是text maxlength 表示可输入的最大字符数 // size 表示表单的初始元素 name 表示表单元素的名称 value 表示初始值（type值为radio 必须指定一个值） 密码框： //密码框 类型为password 密码框里面内容是加密的 单选框： //密码框 类型为radio radio单选框的value值一般用英文表示 checked 表示单选按钮选中状态 可以给...
HTML 表单制作
千寻的博客
09-19 2万+
HTML 表单 用于收集不同类型的用户输入。 表单是一个包含表单元素的区域 表单元素是允许用户在表单中输入内容, 比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等 表单使用表单标签 来设置 HTML 表单-输入元素 多数情况下被用到的表单标签是输入标签（）。 输入类型是由类型属性（type）定义的。 文本域（Text Fie...
表单智能填充，数据复制到文本域，智能填充到表单，html表单提交
05-27
html，表单自动填充，避免重复性工作，一个一个填写，复制粘贴到文本域，自动识别对应表单属性，复制之后自动识别，点击提交就行了。超级简单，有什么不懂的可以直接私信问我。
camundaCurl:使用curl使用html表单部署流程模型
03-22
camundaCurl 使用curl使用html表单部署流程模型 Camunda Modeler（截至2021年3月）无法部署用于UserTasks的自定义html表单。 局限性 手动编辑包含curl命令的bash文件 假设bpmn和html文件位于当前目录中。
HTML简单实例加表单的显示效果
web开发
02-27 328
HTML可以说是一种十分简单的标记语言，但是对于Web开发还是必不可少的，所以对HTML的标记进行适当的了解 还是十分有必要的。下面我们来演示一下基本的HTML效果和一些简单的标签，以及在表单界面的各种提交方式。 首先是HTML的常用简单标签。 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;...
html input标签的type属性的使用
superzx123的博客
12-18 1635
type 浏览器中用于出入的控件（比方说type="text",这就是一个文本框;type="button"，这就是一个按钮） type可选的值如下： button 按钮 checkbox 复选按钮组件 file 文件上传组件 hidden 隐藏域 image 图片区域 password 密码输入文本框 radio 单选按钮组件 reset 重置表单按钮
html语言中 input,HTML <input> 标签的 type 属性
weixin_31714033的博客
05-31 598
HTML 标签的 type 属性定义和用法type 属性规定 input 元素的类型。实例下面的表单拥有两个输入字段以及一个提交按钮：First name: Last name: 亲自试一试(您在页面下面可以找到更多例子)语法属性值值描述button定义可点击按钮(多数情况下，用于通过 JavaScript 启动脚本)。checkbox定义复选框。file定义输入字段和 "浏览"按钮，供文件上传...
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 882
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
复习HTML(基础）
m0_74124657的博客
10-01 1119
目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换3是否有结束标签 常用标签1 标题标签：有六级 我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签： 添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接 ： 内容 1 访问同目录下的网页2 访问外部 网页3 访问本地网页7 标签 ， 8 表
【前端开发入门】html快速入门
qbbmnnnnnn的博客
09-29 1142
本篇介绍html的相关内容，包含文档流的概念以及块级元素和行内元素等。同时强调了有关代码编写习惯性问题。
XHTML 简介
最新发布
wjs2024的博客
10-04 347
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
HTML的修饰(CSS) -- 第三课
ZxVSaccount的博客
10-01 998
前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!
关于HTML 案例_个人简历展示02
Dingyuan0的博客
09-29 1275
展示效果 用table进行布局 label 标签进行关联 例如：点姓名就可以到text中去填写内容 input的使用 text 文本框 select与option 选择框 checkbox 复选框 textarea ul与li 无序列表 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
html表单
05-31
HTML表单是一个用户界面元素，它包含用于收集用户输入的各种表单元素，例如文本输入框、下拉列表、单选按钮、复选框等。当用户提交表单时，它将被发送到服务器进行处理。以下是一个简单的HTML表单示例： ```html <form action="/submit-form" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button type="submit">Submit</button> </form> ``` 这个表单包括三个表单元素：一个文本框、一个电子邮件输入框和一个文本区域，以及一个提交按钮。当用户点击提交按钮时，表单数据将被发送到服务器的“/submit-form”端点，使用POST方法。此外，每个表单元素都有一个“required”属性，这意味着用户必须填写它们才能提交表单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值