HTML—表单元素

最新推荐文章于 2024-11-04 23:25:00 发布
最新推荐文章于 2024-11-04 23:25:00 发布
阅读量812 收藏 10
点赞数 7
分类专栏： HTMLCSS 文章标签： css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72231179/article/details/140477859
版权

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>表单元素</title>

    <style>

        label {

            font-weight: bold;

            font-size: 20px;

        }

        .register-button {

            background-color: #008eff;

            border: 0;

            color: white;

            height: 50px;

            width: 100%;

            border-radius: 5px;

        }

        input {

            height: 30px;

            vertical-align: middle;

            /* 改变盒子大小计算方式的属性 */

            box-sizing: border-box;

        }

        button {

            height: 30px;

            vertical-align: middle;

        }

        .code-box {

            font-size: 0;

        }

        .code-box input {

            font-size: 14px;

        }

    </style>

</head>

<body>

    <form>

        <table>

            <tr>

                <td>

                    <label>用户名</label>

                </td>

                <td>

                    <input type="text" placeholder="请设置用户名">

                </td>

            </tr>

            <tr>

                <td>

                    <label>性 &nbsp; 别</label>

                </td>

                <td>

                    <input type="radio" name="sex" checked>男

                    <input type="radio" name="sex">女

                </td>

            </tr>

            <tr>

                <td>

                    <label>手机号</label>

                </td>

                <td>

                    <input type="text" placeholder="可用于登录和找回密码">

                </td>

             </tr>

             <tr>

                <td>

                    <label>密 &nbsp; 码</label>

                </td>

                <td>

                    <input type="password" placeholder="请设置登录密码">

                </td>

             </tr>

             <tr>

                <td>

                    <label>验证码</label>

                </td>

                <td class="code-box">

                    <input type="text" placeholder="请输入"> <button>获取短信验证码</button>

                </td>

             </tr>

             <tr>

                 <td></td>

                 <td>

                    <input type="checkbox">

                    阅读并接受

                    <a href="#">百度用户协议</a>

                    及

                    <a href="#">百度隐私权保护声明</a>

                 </td>

             </tr>

             <tr>

                <!-- 跨列 -->

                <td colspan="2">

                    <button class="register-button"> 注册 </button>

                </td>

             </tr>

        </table>

    </form>

</body>

</html>

图例：

huayu_前端
关注
专栏目录
html——表单元素
chhhhh0403的博客
04-22 1338
以下文章主要探讨 HTML5 中表单元素，表单元素用于获取用户的输入数据，以及HTML5 中表单中 input 元素的 type 属性，根据不同的值来显示不同的输入框。 一．表单元素总汇 1.基础表单元素 在 HTML5 的表单中，提供了各种可供用户输入的表单控件。 元素名称 说明 form 表示 HTML 表单 input 表示用来收集用户输入数据的控件 tex
html页面中看不到的表单元素,解决HTML表单元素覆盖样式元素问题_html
weixin_34138014的博客
06-03 1319
在设计html页面的过程中经常会遇到表单元素覆盖样式元素引起的问题，图一就是一个典型的例子。不要小看这个貌似“低级”的问题，即使一些规模较大的网站上类似的问题也绝不鲜见。本文探讨了造成这一问题的根本原因，并提出一种补救办法――之所以说补救办法而不是一劳永逸的解决办法，是因为微软和NetScape这两个巨头也还没有对策。一、HTML元素的显示优先级HTML中常用的表单元素包括：文本区域(TEXTAR...
html常见的表单元素有哪些,html表单元素有哪些？
weixin_36194102的博客
06-10 5179
HTML中常用的表单元素包括：文本区域(TEXTAREA)，列表框(SELECT)，文本输入框(INPUT type=text)，密码输入框(INPUT type=password)，单选输入框(INPUT type=radio)，复选输入框(INPUT type=checkbox)，重置按钮、提交按钮、隐藏域、等等。一、文本域二、密码域密码跟文本框类似，但是在里面输入的内容显示为圆点。三、单选按...
HTML表单元素-输入框
热门推荐
前端队长Daotin
11-06 1万+
2、表单元素-输入框输入框使用input标签。<input>标签，根据type属性的不同，会有不同的表现样式。默认type="text"，也就是文本输入框。2.1、文本输入框单行的文本区域，（输入中的换行会被自动去除）。<input type="text" name="username" maxlength="6" readonly="readonly" ...
HTML 表单元素的基本样式
歪脖先生的博客
02-22 5778
表单元素的样式CSS 表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等，以及对表单元素进行分组的 fieldset 和 legend 元素。根据功能的不同，input 元素又包括 text、password、radio、checkbod、file、submit、reset、search、tel、u...
html中表单元素中的单选框,Html表单元素及表单元素详解
weixin_33068783的博客
06-03 2749
大纲1、认识表单2、认识表单元素3、表单元素的分类4、表单元素——文本框5、表单元素button6、表单元素——单选、多选7、表单元素——select8、表单元素——textarea9、推荐1、认识表单1、在一个页面上可以有多个form表单，但是向web服务器提交表单的时候，一次只可以提交一个表单。2、要声明一个表单，只需要使用form标记来标明表单的开始和结束，若需要向服务器提交数据，则在for...
HTML表单元素、表单控件
qq_43575044的博客
10-18 3734
HTML&CSS-01 HTML工作原理 HTML是部署在服务器上的文本文件根据HTTP协议，浏览器发出请求给服务器，服务器做出响应，给浏览器返回一个HTML浏览器解释执行HTML，从而显示出内容 HTML部署在服务器上，运行在浏览器上 表单 表单用于显示、收集信息，并提交信息到服务器 表单二要素： （1）表单元素 （2）表单控件 表单就是从浏览器向服务器传输数据的手段 表单元素： 用来声明数据提交的范围，只有在此元素内的数据可以提交给服务器。 定义表单:使用成对的<form>&l
html元素覆盖,HTML表单元素覆盖样式元素问题及其补救之道
weixin_32804237的博客
06-08 1668
HTML表单元素覆盖样式元素问题及其补救之道出处：中国电脑教育报责任编辑：pcedu作者：俞伟明在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题，图一就是一个典型的例子。不要小看这个貌似“低级”的问题，即使一些规模较大的网站上类似的问题也绝不鲜见。本文探讨了造成这一问题的根本原因，并提出一种补救办法——之所以说补救办法而不是一劳永逸的解决办法，是因为微软和NetScape这两个巨...
HTML中常用表单元素使用（详解！）
Jin_Xiang123的博客
12-12 2066
本篇文章主要介绍HTML中常用表单元素使用以及部分理论知识。 表单元素是指用于收集用户信息或提交数据的 HTML 元素。表单包括多个表单元素，如文本框、下拉框、单选框、复选框、提交按钮等。用户可以在表单元素中填写数据或进行选择操作。
HTML一些常用的表单元素,表单元素-HTML中常用的表单元素
weixin_42237925的博客
07-21 1531
HTML中常用的表单元素有datalist、keygen、output。1、datalistdatalist元素规定输入域的选项列表。列表通过datalist内的option元素创建的。如需把datalist绑定到输入域，用输入域的list属性引用datalist的id。2、keygenkeygen元素的作用为提供一种验证用户的可靠方法。keygen元素为密钥对生成器(key-pairgenera...
HTML表单元素学习-公开课.pptx
07-07
在本课程中，我们将深入学习HTML表单元素及其应用。 首先，我们来了解一下基本的表单标签： 1. `<form>`：这是创建表单的基本元素，它定义了整个表单区域。`action`属性指定了提交表单后服务器处理数据的URL，而`...
用HTML表单元素绘制旋转圣诞树-DOMTree.zip
10-28
用HTML表单元素绘制旋转圣诞树-DOMTree
required-if:HTML表单元素的属性有所改善
05-11
HTML表单元素的属性有所改善。 想法：使条件动态必需元素而不是仅使静态必需元素成为条件。 例如：有2个区域的无线电切换器（交付类型：“接机”；“ EMS”过帐）和第2个无线电的4个字段。 我希望在此情况下，如果...
用html表单元素画的一棵旋转圣诞树.rar
10-27
圣诞树html网页代码
关于html的表单元素详解(一)
09-28
主要介绍了关于html的表单元素，文中讲解了Action 属性Method 属性-下拉列表：< select > 元素-按钮：< button> 元素等，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2024 CSS保姆级教程二 - BFC详解
qq_37779333的博客
11-04 646
先看下MDN上关于BFC的定义：​​块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。​​具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。​通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。​。
黑马官网最新2024前端就业课V8.5笔记---CSS篇（2）
最新发布
m0_63763668的博客
11-04 745
浮动属性 float,left 表示左浮动,right 表示右浮动浮动后的盒子顶对齐浮动后的盒子具备行内块特点父级宽度不够,浮动的子级会换行浮动后的盒子脱标子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果双伪元素法浮动本质作用是实现图文混排效果。
CSS中综合练习（基础学校完整静态网页教程）！！
CH040708的博客
11-03 241
集合三行、多行多列、百分比布局做的基础学校完整静态网页#
CSS--两列网页布局，三列布局和多行多列布局
2301_82005922的博客
10-30 525
上一期我们已经学会两列布局了，那么三列布局和多行多列布局怎么写呢？
HTML表单元素格式详解与开发要点
在HTML资源课件中，"表单元素的统一格式"章节深入探讨了如何在网页设计中创建和管理用户交互的表单。表单是网站中至关重要的组成部分，它们允许用户输入数据并提交给服务器进行处理。理解表单元素的统一格式对于编写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值