[HTML]表单标签(form表单域、input输入表单、label标签、select下拉表单、textarea文本域)

本博文介绍HTML中的表单标签。

表单 = 表单域 + 表单控件 + 提示信息,下面说说表单域和表单控件。

1 表单域标签:

        基本格式:

        <form action="url" method="提交方式" name="表单域名称">

                各种表单元素控件

        </form>

        参数说明:

参数说明
action用于指定接收并处理表单数据的服务器程序的URL
method用于设置表单数据的提交方式,其取值为get或者post
name指定表单的名称

2 表单控件(表单元素)

  • input输入表单元素

        基本格式:<input type="表单类型" name="表单名称" value="表单的值">

        input的常用属性:

属性名说明
type决定输入类型,可选值及说明在下表
name定义input元素的名称
id标签的唯一标识
value规定input元素的值
checked规定此input元素首次加载时被选中,用法:checked="checked"
maxlength规定表单中输入字符串的最大长度

        属性type的可选值:

可选值说明
button可点击按钮(结合js搭配使用)
file定义输入字段和“浏览”按钮,供文件上传
checkbox复选框(表单属性name需要相同)
password密码字段,字段中字符被掩码
hidden隐藏的输入字段
radio单选按钮(表单属性name需要相同)
reset重置按钮,清除表单数据
text单行输入字段,默认宽度为20字符
submit提交按钮,可将表单数据发送到服务器
  • label标签

        用处:绑定一个表单元素,当点击label标签内文本时,浏览器自动将光标转到(或选择)对应的表单元素。注意label的for属性值要和input的id属性值一致。

        基本格式:<label for="input的id值">标签内文本</label>

        举例:

        <label for="字符串">男</label>

        <input type="radio" name = "sex" id="字符串">

        此时用户点击“男”,则会选中单选按钮。

  • select下拉表单元素

        基本格式:

        <select>

                <option>选项1</option>

                <option>选项2</option>

        </select>

        注意:<option>中添加selected = "selected",则表示默认选中。

  • textarea文本域元素

        基本格式:

        <textarea rows="行数" cols="列数">

                文本内容

        </textarea>

        参数说明:

参数说明
rows文本域的行数
cols文本域的列数
0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
  • 1.4 超链接 1.4.1 基础语法 基础语法: 拓展参数: href 跳转链接地址 target 链接打开方式 1.4.2 锚链接(id参数) 每个标签都可以带有一个id...

  • 表格:  表格1 表格2 快捷键:table>tr*数量>td*数量   属性名 属性值 说明 ...

  • 获取元素的尺寸信息,有很多种方法。不同的尺寸属性有不同的定义,如果没有很好的总结,就很容易混淆。下面就一起来看看。偏移尺寸(offset)元素相对于偏移父元素(offsetParent)的偏移尺寸。o...

  • w3c机构:规定网页分成三个部分:结构、样式、表现形式。     无序列表: (每个列表左侧都有实心黑点,可以用css去掉)   列表1 列表2 快捷方式:...

  • 最近又是更新了报告模板的样式新使用了目录对象 因为直接生成的目录样式比较丑所以这边使用的是自定义xsl                                               ...

  • 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识...

  • html篇之《标签分类和嵌套》 一、常用标签 (1) 一个区块容器标记,可以包含图片、表格、段落等各种html元素 (2) 没有实际意义,为了应用样式 二、标签分类 (1) 块级标签 独...

  • 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识...

  • HTML HTML01:初识HTML HTML Hyper Text Markup Language(超文本语言) W3C World Wide Web Consortium...

  • 好家伙,好久好久没有更新这个系列了   为了使文档更方便阅读,使代码更容易维护,来把这个飞机大战模块化 项目已开源: https://gitee.com/tang-and-han-...

  • 网络环境总是多样且复杂的,一张网页图片可能会因为网路状况差而加载失败或加载超长时间,也可能因为权限不足或者资源不存在而加载失败,这些都会导致用户体验变差,所以我们需要对图片加载失败时的情况进行一个弥补...

  • 这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 HTML页面加载过程会发生什么?因为浏览器网络拉取资源是多线程的,但是dom树的操作都是在一个线程中的,所以网页资源的解析、js加载、...

  • Markdown 利用HTML进行优雅排版 我在使用Markdown整理文档的时候发现,Markdown本身对文本格式的排版很单一,只有编号、字体加粗、固定标题格式等一些基础的排版,使用不够灵活,好...

  • 零、学习中的补充 1、head中的meta 这段代码表示2s后当前网页会自动refresh跳转到http://www.baidu.com页面。 一般来说,HTML中只有六个标签可以放在head中...

  • 上篇文章我们一起学习了 Flowable 中的动态表单,动态表单说白了就是把变量打包定义,零存整取。但是小伙伴们可能很难实实在在 GET 到动态表单一些有创造性的功能,所以今天我们就来继续看看 Flo...

  • 一、HTML介绍 HTML是一种标记语言,不是编程语言,为了快速上手,其他的可以自己查询,下面是我使用VScode生成的第一个HTML网页。 二、HTML标签介绍 标签分为单标签和双标签, 换行:单...

  • 近期于项目中发现微信小程序不能直接解析html富文本内容信息碾转多方,已寻得解决方案。话不多说,直接上货使用wxParsegit地址:https://github.com/icindy/wxP...把...

  • 上篇: Bootstrap Blazor 实战 通用导入导出服务(Table组件) 1.新建工程 新建工程b14table dotnet new blazorserver -o b14table ...

  • 渲染模板 我的客服系统后端使用的golang Gin 框架,想把页面渲染出来,下面就是加载html模板页面 package router func InitViewRouter(engine *gi...

  • 目标: 会使用HTML5的基本结构创建网页 会使用文本相关标签排版文本信息 会使用图像相关标签实现图文并茂的页面 会使用标签创建超链接、锚链接及功能性链接 1、什么是HTML HTML:Hyper...