web(HTML之表单练习)

使用HTML实现该界面:

要求如下:

  1. 用户名为文本框,名称为 UserName,长度为 15,最大字符数为 20。

  2. 密码为密码框,名称为 UserPass,长度为 15,最大字符数为 20。

  3. 性别为两个单选按钮,名称为 sex,值分别为男和女,男默认选中。

  4. 爱好是三个多选按钮,名称为 like,值分别为写作、听音乐、体育。

  5. 省份为下拉框,名称为 province,选项的键-值对为 Key:陕西省,value:shaanxi ;Key:山西省,value:shanx;陕西省默认选中。

  6. 自我介绍为多行文本框,名称为 intro,宽 25,高 5,默认值为“这个家伙什么也没留下”。

  7. 提交按钮,名称为“send”,标签为“提交”。

  8. 重置按钮,名称为“reset”,标签为“重置”。

  9. 参照图使用表格定位表单。

实现HTML代码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册</title></head><style>table{background-color: #D3D3D3;}</style><body><table border="1" cellspacing="0" cellpadding="2"><tr><td colspan="2" align="center" bgcolor="grey">用户注册</td>				</tr><tr><td align="right">用户名</td><td><input type="text" name="UserName" value="" minlength="15" maxlength="20"/></td></tr><tr><td align="right">密码</td><td><input type="password" name="UserPass" minlength="15" maxlength="20"/></td></tr><tr><td align="right">性别</td><td><input type="radio" name="sex" value="男" checked/>男 <input type="radio" name="sex" value="女"/>女<br/></td></tr><tr><td align="right">爱好</td><td><input type="checkbox" name="like" value="写作"/>写作 <input type="checkbox" name="like" value="听音乐"/>听音乐 <input type="checkbox" name="like" value="体育"/>体育<br /></td></tr><tr><td align="right">省份</td><td><select name="province" ><option value="shaanxi" selected>陕西省</option><option value="shanx">山西省</option></select></td></tr><tr><td align="right">自我介绍</td><td><textarea name="intro" cols="25" rows="5">这个家伙什么也没留下</textarea></td></tr><tr><td colspan="2" align="center" bgcolor="grey"><input type="submit" name="send"/><input type="reset" name="reset"/></td></tr></table>

结果图:

涉及知识点

1、表格标签(<table>、<tr>、<td>)、表格对齐、表格背景、表格填充和边距、表格的合并(单元格跨行rowspan、跨列colspan)

2、表单标签(<input>、<select>、<textarea>)

input标签type属性

类型作用
text单行文本框
password密码框
radio单选按钮
checkbox多选按钮
submit提交按钮
reset复位按钮
button按钮
image图像按钮

hidden

file

隐藏域

文件域

input标签其他属性

属性名称属性值功能
name字符串元素名称
value字符串元素值
id字符串客户端唯一标识
size数字以字符个数设定的元素宽度
maxlength数字元素接受字符数的上限
checked元素是否被选中

select标签

属性名称属性值属性作用
option子项下拉框的选项
value字符串选项的值
name字符串下拉框的名称
selected默认被选中的选项
multiple”multiple“

以列表形式显示

当select标签设置 multiple属性时,select以列表形式显示,当select标签不设置 multiple属性时,以下拉框形式显示。列表框在选择时按住键盘的ctrl或shift键可以实现多选,而下拉框只能单选。

textarea标签

属性名称属性值属性作用
cols数字以字符个数设定的多行文本框的宽度
rows数字以行数设定的多行文本框的高度
name字符串多行文本框的名称

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

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

相关文章

三层交换的原理

一.三层交换技术 1.什么是三层交换机 要实现vlan间通信&#xff0c;就需要路由&#xff0c;解决办法要么是二层交换机加路由器形成单臂路由&#xff0c;要么就是直接使用三层交换机。 ①什么是单臂路由&#xff1a; ②单臂路由实现不同vlan间通信的原理&#xff1a; 路由器…

os功能模板

【 一 】简介 os 就是 “operating system” 的缩写&#xff0c;顾名思义&#xff0c;os 模块提供的就是各种 Python 程序与操作系统进行交互的接口。通过使用 os 模块&#xff0c;一方面可以方便地与操作系统进行交互&#xff0c;另一方面页可以极大增强代码的可移植性。如果该…

Linux-----8、相关符号

# 相关符号 # 1、名词解释 标准输入&#xff08;stdin&#xff09;&#xff1a;键盘上的输入 文件描述符—>0 标准输出&#xff08;stdout&#xff09;&#xff1a;屏幕上 正确 的输出 文件描述符—>1 标准错误&#xff08;stderr&#xff09;&#xff1a;屏幕上 错误…

为什么MCU在ADC采样时IO口有毛刺?

大家在使用MCU内部ADC进行信号采样一个静态电压时&#xff0c;可能在IO口上看到这样的波形。这个时候大家一般会认识是信号源有问题&#xff0c;但仔细观察会发现这个毛刺的频率是和ADC触发频率一样的。 那么为什么MCU在ADC采样时IO口会出现毛刺呢&#xff1f;这个毛刺对结果有…

ActionCLIP:A New Paradigm for Video Action Recognition

文章目录 ActionCLIP: A New Paradigm for Video Action Recognition动机创新点相关工作方法多模态框架新范式预训练提示微调 实验实验细节消融实验关键代码 总结相关参考 ActionCLIP: A New Paradigm for Video Action Recognition 论文&#xff1a;https://arxiv.org/abs/21…

【Spark面试】Spark面试题答案

目录 1、spark的有几种部署模式&#xff0c;每种模式特点&#xff1f;&#xff08;☆☆☆☆☆&#xff09; 2、Spark为什么比MapReduce块&#xff1f;&#xff08;☆☆☆☆☆&#xff09; 3、简单说一下hadoop和spark的shuffle相同和差异&#xff1f;&#xff08;☆☆☆☆☆…

mybatis中oracle的sql没走索引导致特别慢(未加jdbcType的)

如果直接跑sql是能走索引很快&#xff0c;在mybatis中不能&#xff0c;可能就是jdbcType的原因。 比如&#xff0c;我有一个属性A&#xff0c;在表里面是VARCHAR2类型&#xff0c;但是在mybatis中的sql是#{a}&#xff0c;缺少jdbcTypeJdbcType.VARCHAR&#xff0c;就会导致myba…

【精选】计算机网络教程(第3章数据链路层)

目录 前言 第3章数据链路层 1、差错检测&#xff08;CRC&#xff09; 2、点对点协议&#xff08;了解应用场景&#xff09; 3、什么是碰撞域&#xff0c;什么是广播域 碰撞域&#xff08;Collision Domain&#xff09;&#xff1a; 广播域&#xff08;Broadcast Domain&a…

1.Mybatis框架基本使用

特点: mybatis是一款优秀的持久层框架 支持定制化的SQL、存储过程以及高级映射 mybatis可以使用简单的XML或注解来配置和映射原生类型、接口和java的POJO实例 优点: 1.简单、灵活、sql和代码分离,提高可维护性 2.提供映射标签,支持对象与数据库的orm字段关系映射 3.提…

python+pytest接口自动化(16)-接口自动化项目中日志的使用 (使用loguru模块)

通过上篇文章日志管理模块loguru简介&#xff0c;我们已经知道了loguru日志记录模块的简单使用。在自动化测试项目中&#xff0c;一般都需要通过记录日志的方式来确定项目运行的状态及结果&#xff0c;以方便定位问题。 这篇文章我们使用loguru模块来记录接口自动化测试中的日…

灾备建设中,虚拟机异构平台恢复技术原理与应用

在如今混合云环境下&#xff0c;实现异构虚拟化恢复与迁移面临着极大挑战。不同于市面上有代理的恢复方案&#xff0c;虚拟机无代理跨平台恢复解决方案利用自主研发的转换引擎&#xff08;VMCE&#xff09;对已备份虚拟机文件进行高效的存储格式转换和配置信息转换&#xff0c;…

介绍strncpy函数

strncpy函数需要引用#include <string.h>头文件 函数原型&#xff1a; char *_Dest 是字符串的去向 char *_Source是字符串的来源 size_t_Count是复制字符串的大小 #include <stdio.h> #include <string.h> int main() { char arr[128] { \0 }; …