1.表单标签 及 表单属性

·表单标签是 :<form>
·表单属性有:action 和 method;
   ·action属性:规定向何处发送表单数据。
 ·method属性:规定用什么方法发送数据。(get和post)
 get:在发送的url后面拼接表单数据,明文显示表单数据的内容,url的长度有限制。
 post:在消息体/请求体中传递,参数大小无限制。

2.表单项 及 属性

表单标签中常包括三种表单项标签:input、select、textarea

        ·input:定义表单项,通过type属性控制输入

             type属性的值有:

                   ① text:默认值,定义单行的输入字段
② password:定义密码字段
③ radio:单选按钮,name属性相同表示在一个备选圈中,value属性不同,表示各自的选项;如果最外层嵌套label标签,这样不用精准点击方格,点击文字部分也可选中
④ checkbox:复选


⑤ file:文件上传
⑥ data/time/datatime-local:定义日期、时间、日期和时间
⑦ number:数字输入框
⑧ email:邮件输入框
⑨ hidden:隐藏域
⑩ submit/reset/button:提交、重置、可点击按钮,value属性的值会展示在按钮上

-------------------------------------------------------------------------------------------------------------------------

        ·select:下拉列表,标签 option 定义列表项

                形式写法:

-------------------------------------------------------------------------------------------------------------------------

        ·textarea:定义文本域

                常见属性的值有:cols和row

                        ① cols:一行最多有几个字符
② rows:默认可以写几行

3.表单效果展示:

<table action=""  methods="get"><h1 style="text-align: center;">基础信息表</h1>姓名:<input type="text" name="name">   <br>  密码:<input type="password" name="password">   <br>    性别:<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女   <br>爱好: <label><input type="checkbox" name="love" value="1"> 唱歌</label> <label><input type="checkbox" name="love" value="2"> 跳舞</label> <label><input type="checkbox" name="love" value="3"> 绘画</label> <br>上传简历pdf:<input type="file"> <br>选择日期 和 时间:<input type="datetime-local"><br>年龄:<input type="number"><br>邮件:<input type="email"><br>学历:<select name="degree"><option value="1">-----下拉选择学历-----</option><option value="2">高中</option><option value="3">本科</option><option value="4">研究生</option></select><br>其他留言:<textarea cols="30" rows="6"></textarea><br><br><input type="button" name="button" value="按钮">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="reset" name="reset" value="重置">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="submit" name="submit" value="提交"></table>

整个代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title><style>span{margin-left: 60px;color: darkblue;}.div1{width: 380px;height: 600px;background-color:lightgoldenrodyellow;margin-left: 100px;padding: 30px ;line-height: 40px;}div{margin-left: 70px;}</style></head><body><h2>1.表单标签 及 表单属性</h2><p>·表单标签是 :<b>form</b><br>·表单属性有:action 和 method;<br>&nbsp;&nbsp;&nbsp;<b>·action属性:</b>规定向何处发送表单数据。<br>&nbsp;&nbsp;&nbsp;<b>·method属性:</b>规定用什么方法发送数据。(get和post)<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;get:在发送的url后面拼接表单数据,明文显示表单数据的内容,url的长度有限制。<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;post:在消息体/请求体中传递,参数大小无限制。</p><h2>2.表单项 及 属性</h2><p>表单标签中常包括三种表单项标签:<b>input、select、textarea </b> </p><p style="text-indent: 30px;"><b style="color: blue;">·input:</b>定义表单项,通过type属性控制输入</p><span>type属性的值有:</span><div> ① text:默认值,定义单行的输入字段<br>② password:定义密码字段<br>③ radio:单选按钮,name属性相同表示在一个备选圈中,value属性不同,表示各自的选项;如果最外层嵌套label标签,这样不用精准点击方格,点击文字部分也可选中<br>④ checkbox:复选<br>⑤ file:文件上传<br>⑥ data/time/datatime-local:定义日期、时间、日期和时间<br>⑦ number:数字输入框<br>⑧ email:邮件输入框<br>⑨ hidden:隐藏域<br>⑩ submit/reset/button:提交、重置、可点击按钮,value属性的值会展示在按钮上</div><p style="text-indent: 30px;"><b style="color: blue;">·select:</b>下拉列表,标签 <b>option</b> 定义列表项</p><span>形式写法:</span><br><div> <img src="select.png" width="400px"> </div><p style="text-indent: 30px;"><b style="color: blue;">·textarea:</b>定义文本域</p><span>常见属性的值有:<b>cols和row</b></span><div>① cols:一行最多有几个字符<br>② rows:默认可以写几行</div><h2>3.效果展示:</h2><div class="div1"><table action=""  methods="get"><h1 style="text-align: center;">基础信息表</h1>姓名:<input type="text" name="name">   <br>  密码:<input type="password" name="password">   <br>    性别:<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女   <br>爱好: <label><input type="checkbox" name="love" value="1"> 唱歌</label> <label><input type="checkbox" name="love" value="2"> 跳舞</label> <label><input type="checkbox" name="love" value="3"> 绘画</label> <br>上传简历pdf:<input type="file"> <br>选择日期 和 时间:<input type="datetime-local"><br>年龄:<input type="number"><br>邮件:<input type="email"><br>学历:<select name="degree"><option value="1">-----下拉选择学历-----</option><option value="2">高中</option><option value="3">本科</option><option value="4">研究生</option></select><br>其他留言:<textarea cols="30" rows="6"></textarea><br><br><input type="button" name="button" value="按钮">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="reset" name="reset" value="重置">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="submit" name="submit" value="提交"></table></div></body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32的SPI通信(软件读写W25Q64)

在了解完I2C通信后&#xff0c;不免会接触到到SPI通信。而一开始&#xff0c;可能会觉得两者好似没什么区别。为什么要学SPI呢&#xff0c;I2C和SPI有什么区别呢。为此我详细展开说说。1.什么是 SPI&#xff1f;SPI&#xff0c;全称 Serial Peripheral Interface&#xff0c;中…

子词分词器(Byte Pair Encoding + WordPiece)

参考文章&#xff1a;子词分词器BPE和WordPiece理解_wordpeice-CSDN博客 子词分词器BPE和WordPiece理解_wordpeice-CSDN博客 WordPiece 和 BPE 的区别-CSDN博客 点互信息&#xff08;PMI&#xff09;和正点互信息&#xff08;PPMI&#xff09;-CSDN博客 https://zhuanlan.z…

阿里招AI产品运营

AI产品运营&#xff08;岗位信息已经过jobleap.cn授权&#xff0c;可在csdn发布&#xff09;灵犀互娱 广州收录时间&#xff1a; 2025年08月05日职位描述负责AI技术在游戏行业的应用与落地&#xff0c;专注于海外市场的运营中台建设&#xff1b; 将结合AI技术与游戏行业特点&a…

Git 分支迁移完整指南(结合分支图分析)

基于分支图的当前状态分析 分支图关键信息解读​分支结构​&#xff1a; #mermaid-svg-gc9SPnwlbrM2FzHf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-gc9SPnwlbrM2FzHf .error-icon{fill:#552222;}#mermaid-svg-…

小程序省市级联组件使用

背景。uni-data-picker组件用起来不方便。调整后级联效果欠佳&#xff0c;会关闭弹窗需要重新选择。解决方案。让cursor使用uniapp 原生组件生成懒加载省市级联 <template><view class"picker-cascader"><view class"cascader-label">&l…

Java技术栈/面试题合集(8)-Redis篇

场景 Java入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/140870227 通过对面试题进行系统的复习可以对Java体系的知识点进行查漏补缺。 注: 博客: 霸道流氓气质-CSDN博…

川翔云电脑:引领开启算力无边界时代

一、何为云电脑&#xff1f;重新定义“主机”概念 云电脑将传统本地计算机的核心硬件资源&#xff08;CPU、GPU、内存、硬盘等&#xff09;集中部署于远程高性能数据中心&#xff0c;通过网络技术将虚拟桌面实时传输到您的任意访问设备上。 ​​如同将高配主机装入云端&#…

tc 介绍

目录 1.背景 2. tc介绍 3. tc 丢包 1.背景 需要使用tc 构造丢包场景&#xff0c;注意tc 丢包不能确定丢弃的是否是payload 数据包&#xff0c;有可能丢弃 ack 包。 2. tc介绍 1. 无法正常使用 [rootpool-100-1-1-18 /]# [rootpool-100-1-1-18 /]# tc qdisc add dev swif…

LabVIEW注册表操作

​本文围绕LabVIEW中操作Windows 注册表的 4 个 VI 展开&#xff0c;介绍其功能、使用场景等并对比&#xff0c;助力工程师高效运用注册表交互功能。各 VI 功能说明&#xff08;一&#xff09;Write the Key功能&#xff1a;创建新注册表键&#xff0c;设置其值&#xff0c;随后…

阿里云部署若依后,浏览器能正常访问,但是apifox和小程序访问后报错链接被重置

项目场景&#xff1a;阿里云部署若依后浏览器能正常通过https访问,但是在apifox和小程序调用接口的时候生报错E问题描述apifox报错&#xff1a;curl报错&#xff1a;通过curl可以清楚的看到通过域名是能准确的访问到IP地址的&#xff0c;说明这个DNS是没有问题的&#xff0c;但…

升级 Elasticsearch 到新的 AWS Java SDK

作者&#xff1a;来自 Elastic David Turner, Dianna Hohensee Elasticsearch 使用官方的 AWS Java SDK 集成了某些 Amazon Web Services (AWS) 功能。这些集成最早在近 10 年前发布的 Elasticsearch 2.0 版本中引入。 最近&#xff0c;AWS 宣布 Elasticsearch 过去十年使用的…

从0到1学习微服务项目黑马头条day01-《APP端登录功能实现》

个人主页&#xff1a;VON文章所属专栏&#xff1a;黑马头条个人唯一微信&#xff1a;微信 有一起学习微服务的小伙伴可以加作者微信&#xff1a;单击即可添加 目录 一、前言 二、项目概述 1、技术栈 2、项目引入 三、改造项目 1、创建heima-leadnews-user 2、创建实体…

Renesas Electronics RZ/V2N 评估套件

简介Renesas Electronics RZ/V2N评估套件采用RZ/V2N中档嵌入式AI微处理器 (MPU) 为嵌入式人工智能 (AI) 应用提供全面的开发平台。该评估套件包括两块板&#xff1a;主板 (RTK0EF0186C02000BJ)&#xff0c;紧凑的153mm x 100mm外形尺寸和RTK0EF0168B00000BJ扩展板。其核心是RZ/…

使用PHP与Apache实现服务器端文件管理

引言 作为前端开发者&#xff0c;你可能经常需要与服务器文件系统交互。本文将详细介绍如何通过PHP配合Apache实现服务器端文件管理功能。即使你没有任何PHP经验&#xff0c;也能按照本教程实现完整解决方案&#xff01; 系统准备 PHP下载与安装 访问PHP官网下载页面 选择与…

在Word和WPS文字中如何输入汉字的偏旁部首

如何在Word和WPS文字中输入偏旁部首&#xff1f;许多输入法会把常见的偏旁部首直接放到词库&#xff0c;对于词库中没有的可以试试这个方法&#xff1a;先输入一个有这个偏旁部首的字&#xff0c;尽量简单一点的&#xff0c;然后选中这个字插入-符号-其他符号。滚动到这个偏旁部…

day44 力扣1143.最长公共子序列 力扣1035.不相交的线 力扣53. 最大子序和 力扣392.判断子序列

最长公共子序列 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些字符&…

应用7:用小白量化智能体金融模块做一个股票选股工具

应用7&#xff1a;用小白量化智能体金融模块做一个股票选股工具 【小白量化智能体】包含有丰富的金融模块。可以让智能体写各种金融量化工具。 我用让小白量化智能体写一个股票选股工具。 我们给【小白量化智能体】一个程序生成话术。 帮我写一个 选股 的应用程序&#xff0c;要…

Qt Frameless Widget跨平台无边框窗口

Qt开发的窗口程序&#xff0c;它的标题栏样式是无法修改的&#xff0c;这个是系统来控制&#xff0c;程序可以调整标题&#xff0c;图标等&#xff0c;但是各个系统可能表现不一致&#xff0c;比如说标题&#xff0c;window10下在标题栏最左边&#xff0c;而UOS则在中间&#x…

使用 IntelliJ IDEA + Spring JdbcTemplate 操作 MySQL 指南

使用 IntelliJ IDEA Spring JdbcTemplate 操作 MySQL 完全指南 一、开发环境搭建&#xff08;基于 IDEA&#xff09; 1. 创建 Spring Boot 项目 打开 IDEA → New Project → Spring Initializr选择&#xff1a; Project SDK: Java 17依赖项&#xff1a;Spring Web, Spring…

从愤怒的小鸟来看Unity武器拖尾的特效优化

目录 前言 素材下载 介绍 官方文档 不添加拖尾的效果 添加拖尾 代码控制拖尾生成 拖尾排序问题 效果 修改拖尾高度和存活时间 效果 待机时无拖尾 效果 参考 前言 在游戏开发过程中&#xff0c;我们经常需要为武器添加拖尾特效&#xff0c;效果如下所示 Unity 自…