当前位置: 首页 > news >正文

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.lryc.cn/news/262565.html

相关文章:

  • 通过对象轮换实现 LRU 缓存结构
  • 【Unity动画】综合案例完结-控制角色动作播放+声音配套
  • 【工作流Activiti】任务组
  • 桌面概率长按键盘无法连续输入问题
  • 用23种设计模式打造一个cocos creator的游戏框架----(十九)备忘录模式
  • 动手学深度学习-自然语言处理-预训练
  • 力扣200. 岛屿数量(java DFS解法)
  • 解决el-table组件中,分页后数据的勾选、回显问题?
  • web网络安全
  • 若依 ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码
  • 安卓10 flutter webview 回退会闪退
  • 【Unity入门】物体5种移动方法
  • Elasticsearch的 8.x常用api汇总
  • k8syaml提供的几个有意思的功能,Kubernetes在线工具网站
  • 【图像分类】【深度学习】【Pytorch版本】 ResNeXt模型算法详解
  • Android 14 应用适配指南
  • 【AI美图提示词】第07期效果图,AI人工智能自动绘画,精选绝美版美图欣赏
  • 前端知识(十三)——JavaScript监听按键,禁止F12,禁止右键,禁止保存网页【Ctrl+s】等操作
  • 面向对象设计与分析(28)单例模式的奇异递归模板CRTP实现
  • 微信小程序 - 龙骨图集拆分
  • 使用React 18和WebSocket构建实时通信功能
  • vue3使用vue-router嵌套路由(多级路由)
  • openGauss学习笔记-164 openGauss 数据库运维-备份与恢复-导入数据-使用COPY FROM STDIN导入数据-处理错误表
  • QT Widget - 随便画个圆
  • js输入框部分内容不可编辑,其余正常输入,el-input和el-select输入框和多个下拉框联动后的内容不可修改
  • 分布式文件存储系统minio了解下
  • 迅为RK3568开发板使用OpenCV处理图像-ROI区域-位置提取ROI
  • 重新认识Word——尾注
  • 所有学前教育专业,一定要刷到这篇啊
  • colmap三维重建核心逻辑梳理