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

表单项标签简单学习

目录

1. 单选框 radio​ 编辑​编辑​编辑​编辑

2. 复选框 checkbox ​编辑​编辑​编辑

3. 隐藏域 hidden

4. 多行文本框 textarea​ 编辑​编辑

5. 下拉框 select​ 编辑​编辑

6. 选择头像​编辑​编辑


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单标签测试</title>
</head>
<body><!-- 设置提交地址和提交方式 --><form action="01-HTML.html" method="get"><!-- 添加表单项标签:即用户输入信息的标签 --><!-- 希望用户提交一些特定的信息,但是考虑到安全问题或者用户操作问题,不希望该数据发生改变--><input type="hidden" name="id" value="123">    <br><input type="text" name="pid" value="456" readonly>  <br><input type="text" name="tid" value="789" disabled>  <br>用户名:<input type="text" name="zhangsan" />   <br>密码:<input type="password" name="userpwd" />  <br><!-- 添加登录与清空按钮 --><input type="submit" value="登录" /><input type="submit" value="清空" /> <br><!-- 性别 -->性别:<input type="radio" name="gender" value="1" checked> 男<input type="radio" name="gender" value="0">        女 <br>爱好:<input type="checkbox" name="hobby" value="1"> 足球<input type="checkbox" name="hobby" value="2"> 排球<input type="checkbox" name="hobby" value="3"> 羽毛球<input type="checkbox" name="hobby" value="4"> 铅球 <br>个人简介:<!-- 没有value属性 --><textarea name="intro" style="width: 500;height: 1000;"></textarea> <br>选择头像:<input type="file"> <br>籍贯:<select name="address"><option value="1">京</option><option value="2">津</option><option value="3">冀</option><option value="4">请选择</option></select></form>
</body>
</html>

注意:

name:表单元素的名字,方便后台区分每个表单元素;

value:作为提示信息给用户 / 后台人员查看选择的信息;

 1. 单选框 radio
2. 复选框 checkbox 
3. 隐藏域 hidden

隐藏域不显示在页面上,提交时会携带;

4. 多行文本框 textarea
5. 下拉框 select
6. 选择头像
http://www.lryc.cn/news/434488.html

相关文章:

  • 固态硬盘和机械硬盘区别?固态硬盘和机械硬盘哪个好?
  • QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第三期]
  • 亚信安全全球云安全SaaS运营总部落地厦门 安全点亮一带一路
  • 在cmd中输入mysql无法运行(环境变量配置保姆级教程)
  • 在Webmin上默认状态无法正常显示 Mariadb V11.02及以上版本
  • C和指针:预处理(#include/define/if...)
  • 【Java数据结构】泛型的进阶部分(泛型通配符)
  • 大模型实战一、Ollama+RagFlow 部署本地知识库
  • 系统工程建模MBSE
  • SVN的使用技巧
  • 使用 RabbitMQ 实现秒杀订单系统的异步消息处理
  • oracle19.3单机升级到Oracle19.22
  • 半导体的发展--创世新产品介绍
  • Ubuntu WSL使用技巧
  • 4 个步骤带你快速上手 Einstein Copilot for Tableau
  • C++ | Leetcode C++题解之第386题字典序排数
  • vsftpd配置用户和密码让其他客户端连接
  • Oracle使用序列后提示违反唯一约束---解决办法
  • 乐观锁悲观锁
  • Unity面试:什么是UnityEvent?
  • 食品安全管理员考试真题题库及答案
  • 【C++】—— vector 的模拟实现
  • MySQL 查询过慢的优化方法
  • YoloV8修改分类(Classify)的前处理(记录)
  • 半监督学习能否帮助训练更好的模型?
  • VBA 获取字段标题代码轻松搞定
  • C++代码片段
  • Golang | Leetcode Golang题解之第388题文件的最长绝对路径
  • docker打包前端项目
  • 调度器怎么自己写?调度器在实现时需要注意哪些细节?请写一个jvm的调度器?如何在这个调度器中添加多个任务?