首页 > 其他分享 >HTML-学习表单-2022-12-22

HTML-学习表单-2022-12-22

时间:2022-12-22 19:35:22浏览次数:43  
标签:12 22 -- URL HTML 提交 按钮 input type

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--表单form
action 提交的位置,可以是网站,也可以是一个请求处理地址
method get方式提交,可以在URL可以看到提交的信息,不安全,高效
post 方式提交,在URL看不到参数,安全,传输大文件
value 默认初始值
maxlength 最长长度
size 文本框的长度
radio
-->
<form action="HtmlDemo01.html" method="get">
<!--只读标签-->
<!--placeholder 提示信息 input有效
required 非空判断
patten 正则表达式 可查BAIDU了解细节-->
<p>名字:<input type="text" name="username" placeholder="请输入用户名" required> </p>
<p>密码:<input type="password" name="pwd" hidden value="123456"> </p>

<!--单选框-->
<p>性别
<!--禁用标签-->
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>

<!--多选框-->
<p>爱好
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>

<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>
<input type="button"name="btn1"value="点击变长">
<input type="image" src="../resource/image/tx.jpg">
</p>

<p>
<input type="submit">
<input type="reset" value="清空">
</p>

<!--下拉框-->
<p>国家:
<select name="列表名称">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="INDIA" selected>印度</option>
<option value="SWISS">瑞士</option>
</select>
</p>

<!--文本域-->
<p>
<textarea name="textarea" cols="10" rows="2">文本内容</textarea>
</p>

<!--文件域
所有的IMPUT 都需要一个name标贴
-->
<p>
<input type="file" name="files">
<input type="button" value="上传">
</p>

<!--邮件验证-->
<p>邮箱:
<input type="email" name="email">
</p>

<!--URL验证-->
<p>URL:
<input type="url" name="url">
</p>

<!--数字验证-->
<p>数字:
<input type="number" name="num" max="100" min="0" step="1">
</p>

<!--滑块-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="5">
</p>

<!--搜索-->
<p>搜索:
<input type="search" name="search" id="mark">
</p>

<!--增强 鼠标可用-->
<label for="mark">你点我试试</label>
<input type="text" >
</form>

</body>
</html>

标签:12,22,--,URL,HTML,提交,按钮,input,type
From: https://www.cnblogs.com/RUI2022/p/16999447.html

相关文章

  • 前端html
    socket服务端:importsocketdefmain():sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM)sock.bind(('localhost',8089))sock.listen(5)whileTru......
  • NOIP2022游记
    当时考完记错了一个地方,真的以为自己退役了,哭到不能自已,感谢上帝,感谢OI,感谢自己再给自己一个追逐梦想的机会。Day-1离开考还有两天的晚上,宿舍在讨论奇奇怪怪的话题,内容......
  • luoguP2254 [NOI2005]瑰丽华尔兹 题解
    传送门题意给定\(n\)行\(m\)列的矩阵和钢琴的初始位置\((x,y)\),给定\(k\)个时间段,在每个时间段内钢琴会向给定方向(上/下/左/右)滑动,\(1\)秒移动\(1\)个单位长度......
  • 2022年度总结
    生活  2022年是结婚的第一年,今年是失业的第一年,今年是痛苦与快乐的事情并存的一年,今年是迎接新生命的一年。工作  2022年是公司突然倒闭的一年,在今年八月份开始,突然......
  • 盘点2022年电视行业:科技与美学的战场三星缔造“生活方式”的全新价值
    作者|曾响铃文|响铃说前不久,中国质量协会第十一次组织开展了本年度电视行业用户满意度监测,监测对象为市场占有率达90%以上的10个主流电视品牌,结果显示2022年电视行业用......
  • 12.22
    感冒這近幾天,好不爽今天來寫下博客解決一下之前我自己的問題:關於c的頭文件認識不清楚,鬧出的笑話。當一個c語言,必須要#include<stdio,h>我們來見掃,他是必要引用头文件的操作......
  • 【python爬虫课程设计】2022-23赛季欧洲冠军联赛——绘制球员数据柱状图和词云
    一、选题的背景1.背景:2022-23赛季欧洲冠军联赛(2022–23UEFAChampionsLeague)由欧洲足球联合会主办的第68届欧洲足球俱乐部的顶级赛事,也是以欧洲冠军联赛名义下的第31届......
  • centos7中卸载java1.8,并安装java12
     001、查看系统[root@pc1home]#cat/etc/redhat-releaseCentOSLinuxrelease7.9.2009(Core)  002、查看当前的java版本[root@pc1home]#java-version......
  • 2022.12.22 动态规划练习
    依旧是被题目折磨的一天,能想出状态表示,但是在状态计算时不太会想。P1040[NOIP2003提高组]加分二叉树题目描述设一个\(n\)个节点的二叉树\(\text{tree}\)的中序遍......
  • 12.22
    今日内容1.django中间件的三个了解方法2.基于django中间件的功能设计3.cookie与session4.django操作cookie5.django操作session1.django中间件的三个了解方法1.proc......