HTML表单元素

news2024/9/22 21:14:29

HTML表单元素

表单把用户的信息发给服务器。

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <form class="stylin_form1" action="process_form.php" method="post">
        <h3>A Stylin' Form</h3>
        <!-- 控件组,即各种控件的容器 -->
        <fieldset>
            <!-- 控件组文字说明或者标题 -->
            <legend><span>Part 1 &#8226;Basic Controls</span></legend>
            <!-- 单行文本输入控件 -->
            <section>
                <p class="note">* indicates required field</p>
                <!-- for属性把标注和空间关联起来,它的值必须与空间ID值相同 -->
                <label for="user_name">User Name <span style="color: red;">*</span></label>
                <!-- text属性让这个控件可以输入文本 -->
                <input type="text" id="user_name" name="user_name" />
                <p>Please select a user name</p>
            </section>
            <!-- 开始密码控件 -->
            <section>
                <label for="password">Password <span style="color: red;">*</span></label>
                <!-- 密码文本显示为掩码 -->
                <input type="password" id="password" name="password" maxlength="20" />
                <p>Password must be 8 or more characters</p>
            </section>
            <!-- 开始多行文本输入控件 -->
            <section>
                <label for="desc">Description: </label>
                <textarea name="desc" id="desc" placeholder="Enter the desc here."></textarea>
            </section>
            <!-- 开始HTML5日期控件 -->
            <section>
                <label for="special_date">Date:</label>
                <input type="date" id="special_date" name="event_date" min="2024-08-09" />
            </section>
        </fieldset>
        <fieldset>
            <legend><span>Part 2 &#8226; Multiple-Choice Controls</span></legend>
            <!-- 开始复选框 -->
            <section>
                <h4>Select Only One</h4>
                <section>
                    <input checked="checked" id="radio1" name="radioset" type="radio" value="Choice_1" />
                    <label for="radio1">Choice 1 is pre-selected and shows the text wraps nicely
                        if it goes to multiple lines.</label>
                </section>
                <section>
                    <input checked="checked" id="radio2" name="radioset" type="radio" value="Choice_1" />
                    <label for="radio2">Choice 2</label>
                </section>
                <section>
                    <input checked="checked" id="radio3" name="radioset" type="radio" value="Choice_1" />
                    <label for="radio3">Choice 3</label>
                </section>
            </section>
            <!-- 开始选项列表(下拉列表) -->
            <section>
                <label for="select_choice">Select Your Choice</label>
                <select name="select_choice" id="select_choice">
                    <option value="0">None</option>
                    <option value="1">Choice 1</option>
                    <option value="2">Choice 2</option>
                    <option value="3">Choice 3</option>
                    <option value="4">Choice 4</option>
                </select>
            </section>
            <!-- 开始提交按钮 -->
            <section>
                <input type="submit" value="Submit This Form" />
            </section>
        </fieldset>
    </form>
</body>

</html>

form元素

action制定URL

method,post,get

提交表单

表单中数据以"名=值"的形式发给服务器

控件组

把一组表单组织到fieldset中,legend描述的文本。

控件与标注

label与input,for与id值一致。

控件类型

text:基本单行文本框

password:文本显示为掩码

checkbox:复选框

radio:单选按钮

submit:提交表单按钮

time,date,search:HTML5文本框变体

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1996980.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uni-app开发微信小程序注意事项,不要用element-ui

前端扩展组件千万不要用element-ui&#xff0c;开发的时候不报错&#xff0c;发布的时候会报错无法发布。 可以用vant weapp【注意是weapp】 iView weapp 附上hbuilder官方文档 组件的概念 | uni-app官网 (dcloud.net.cn)

git-贮藏区打补丁

1.显示所有贮藏 git stash list 2.将贮藏区的修改打补丁 git stash show -p stash{0} > patchName.patch commit打补丁 git 生成补丁文件及打补丁_git 生成指定目录补丁-CSDN博客 git patch的使用方法_git pattch-CSDN博客

「MyBatis」数据库相关操作

MyBatis 简介 MyBatis 是⼀个持久层框架&#xff0c;用于简化 JDBC 的开发 持久层指的就是持久化操作的层&#xff0c;通常指数据访问层 (dao)&#xff0c;是用来操作数据库的 Mapper 注解的接口表示该接口是 MyBatis 中的 Mapper 接口 回顾一下之前提到过的图 简单来说&…

如何选用合适的开源知识管理系统?10款软件推荐

国内外主流的10款开源知识管理软件对比&#xff1a;PingCode、Worktile、DokuWiki、MediaWiki、GitBook、Nuclino、Think、TiddlyWiki、AFFiNE、Foam。 在管理知识的广阔天地中&#xff0c;选择合适的工具可能会让你感到头痛。开源知识管理软件以其灵活性和成本效益在行业内脱颖…

Java设计模式-单例模式最佳实践

1. 单例模式简介 Java 单例模式是四大设计模式之一&#xff0c;属于创建型设计模式。从定义上看&#xff0c;它似乎是一种简单的设计模式&#xff0c;但在实现时&#xff0c;如若不注意&#xff0c;它会带来很多问题。 在本文中&#xff0c;我们将了解单例设计模式原则&#…

使用 GPU 加速的 XGBoost 预测出租车费用

目录 XGBoost GPU 加速的 XGBoost 用例数据集示例 将文件中的数据加载到 DataFrame 定义特征数组 保存模型 总结 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff0c; 可以当故事来看&#xf…

小智纯前端js报表实战5-绝对坐标-横向扩展

绝对坐标-横向扩展 概述 绝对坐标-横向扩展&#xff1a;绝对坐标定位 层次坐标是实现复杂报表的一个重要功能。 在进行小智报表模板设计时&#xff0c;单元格尚未进行扩展&#xff0c;但是有些时候需要获取扩展后的单元格并进行计算。例如&#xff0c;A1单元格扩展成A1-D1&am…

VUE+Spring前后台传值的坑,后台接收的String参数在末尾会出现 “=”

一、问题 VUESpringBoot做增删改查时&#xff0c;前端使用axios.post发起请求&#xff0c;传输主键字符型参数 taskId 到后台&#xff0c;后台再进行删除处理。 实际过程中发现后台拿到的数据再末尾多了一个等号&#xff0c;但是通过console.log(taskId)前台打印参数是正常的…

巴洛克风格的现代演绎,戴上亚法银耳机,感受古典雕花与现代声学的碰撞

flipears耳机品牌以其独特的风格、精细的配置和卓越的音质在耳机市场中很受欢迎&#xff0c;像是我最近用过的一款Artha Argentum亚法银&#xff0c;就采用了纯银外壳&#xff0c;而且用料扎实&#xff0c;具有出众的声学表现&#xff0c;带来了更干净清澈的声底。内在配置方面…

[Linux] LVM挂载的硬盘重启就掉的问题解决

问题&#xff1a;系统重启后挂在逻辑卷的盘会掉&#xff08;必现&#xff09; 环境&#xff1a;SUSE Linux 11 SP4 原因&#xff1a;boot.lvm是关闭的 解决&#xff1a;boot.lvm设置开启 参考资料&#xff1a; linux下lvm状态Not avaliable问题排查及处理(常见Suse操作系统…

使用ubuntu串口数据收和发不一致问题

串口配置 使用virtual Serial Port Driver Pro模拟串口两个串口&#xff0c;com2和com3&#xff0c;使用默认配置&#xff1b;通过virtual box 串口映射功能&#xff0c;在Ubuntu里使用CuteCom打开com2接受和发送数据&#xff0c;在windows里使用com3发送和接收数据。 遇到问…

24/8/9算法笔记 随机森林

"极限森林"&#xff08;Extremely Randomized Trees&#xff0c;简称ERT&#xff09;是一种集成学习方法&#xff0c;它属于决策树的变体&#xff0c;通常被归类为随机森林&#xff08;Random Forest&#xff09;的一种。极限森林的核心思想是在构建决策树时引入极端…

空间推理验证码的介绍!

空间推理验证码 ​是一种验证码形式&#xff0c;‌旨在通过要求用户解决一些视觉或空间推理问题来区分计算机和人类用户。‌这种验证码形式要求用户通过完成一些视觉或空间推理任务来证明他们是真实的人类用户&#xff0c;‌而不是计算机程序。‌空间推理验证码通常涉及一些图…

智慧交通:将物联网与人工智能完美融合

智慧交通是当今社会面临的一个重要挑战&#xff0c;也是人们生活质量提高的一个重要方面。通过将物联网技术与人工智能相结合&#xff0c;我们能够实现智慧交通系统的全面升级和优化&#xff0c;为人们带来更加便捷、高效和安全的出行体验。 在智慧交通领域&#xff0c;物联网…

Java面试题--JVM大厂篇之从原理到实践:JVM 字节码优化秘籍

目录 引言&#xff1a; 正文&#xff1a; 1. JVM 字节码生成原理 2. 字节码优化的痛点 3. 字节码优化策略 3.1 方法内联&#xff08;Method Inlining&#xff09; 3.2 循环展开&#xff08;Loop Unrolling&#xff09; 3.3 常量折叠&#xff08;Constant Folding&#…

线程池原理(二)关键源码剖析

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 属性 & 构造方法 对于 ThreadPoolExecutor 有几个关键的属性&#xff0c;这里需要先大致了解&#xff1a; public class ThreadPoolExecutor extends AbstractExecutorService {// 控制变量-存放状态和…

什么是NLP分词(Tokenization)

在自然语言处理和机器学习的领域里&#xff0c;咱们得聊聊一个超基础的技巧——就是“分词”啦。这个技巧啊&#xff0c;就是把一长串的文字切分成小块&#xff0c;让机器能更容易地“消化”。这些小块&#xff0c;不管大小&#xff0c;单个的字符也好&#xff0c;整个的单词也…

汽车EDI:德国大众 EDI 项目案例

德国大众&#xff08;Volkswagen&#xff09;是成立于1937年的大型汽车制造商&#xff0c;总部位于德国沃尔夫斯堡。大众集团拥有众多知名汽车品牌&#xff0c;如奥迪、保时捷、宾利、兰博基尼、布加迪等&#xff0c;业务遍及全球。作为一个全球性企业&#xff0c;大众集团依赖…

时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention

时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention 文章目录 前言时序预测|基于变分模态分解-时域卷积-双向长短期记忆-注意力机制多变量时间序列预测VMD-TCN-BiLSTM-Attention 一、VMD-TCN-BiLSTM-Attention模型1. **…

SystemUI plugin 开发

一、前言 SystemUI结构复杂,模块数量众多,最重要的是SystemUI属于常驻进程是一个系统的门面,且不能自升级,如果定制功能对主项目做复杂的修改,首先会造成适配压力,如果对主框架不甚理解,有可能会造成很多隐藏的Bug,且不易修复,一旦崩溃对整个系统的影响很大,那么怎…