<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单
action 表单提交的位置 可以是网站也可以是一个请求处理的地址
method post-get 提交方式
get 方式不安全可以在url看到提交的信息 不安全但是高效 不能传输大文件
post 比较安全 可以传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!-- 文本输入框 input type="text"
value="123456" maxlength="8" size="30"
value 默认初始值 maxlength 最长的输入长度 size 文本框的大小
-->
<p>名字:<input type="text" name="username" placeholder="请输入用户名" required></p>
<!-- 密码框 input type="password"-->
<p>密码:<input type="password" name="pwd"></p>
<!-- radio 单选框
radio 必须要有初始值value 否则不显示
name 表示组别 相同则表示是一个组 就可以单选了
checked 默认选中
-->
<p>性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- checkbox 多选框
-->
<p>爱好:
<input type="checkbox" value="j" name="hobby" checked>Java
<input type="checkbox" value="p" name="hobby">Python
<input type="checkbox" value="c" name="hobby">C/C++
<input type="checkbox" value="p" name="hobby">PHP
</p>
<!-- 按钮
inout type="button" 普通按钮
inout type="image" 图像按钮
inout type="submit" 提交按钮
inout type="reset" 重置按钮
-->
<p>按钮:
<input type="button" name="btn1" value="点击">
<!-- image 提交按钮和 submit 一样 点击就会提交-->
<br/>
<input type="image" name="" src="../resources/image/2.jpg" width="100" height="100">
</p>
<!-- 下拉框、列表框
selected 默认被选中的值
-->
<p>下拉框:
<select name="列表名称">
<option value="ZH">中国</option>
<option value="JA">日本</option>
<option value="AM">美国</option>
<option value="RS" selected>瑞士</option>
</select>
</p>
<!-- 文本域(多行文本)
cols
rows
-->
<p>反馈:
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!-- 文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" name="update" value="上传">
</p>
<!-- 邮箱验证 & url & 数字验证 & 滑块 & 搜索框
-->
<p>邮箱:
<input type="email" name="email" pattern="[1-9]\d{7,10}@qq\.com">
</p>
<p>url:
<input type="url" name="url">
</p>
<p>商品数量:
<input type="number" name="number" max="100" min="0" step="10">
</p>
<p>音量:
<input type="range" name="voice" max="100" min="0" step="1">
</p>
<p>搜索框:
<input type="search" name="search">
</p>
<p>
<label for="oof">搜索框:</label>
<input type="search" name="search" id="oof">
</p>
<!-- 增强鼠标的可用性
-->
<p>
<label for="mark">你点我试试:</label>
<input type="text" id="mark">
</p>
<!-- 自定义邮箱
-->
<p>
<!-- 在邮箱的那里得到了验证-->
<input type="text" name="diymail" pattern="[1-9]\d{7,10}@qq\.com">
</p>
<p>
<input type="submit" value="在线登录">
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
课件-1小时学会HTML5基础
需积分: 10 48 浏览量
2022-04-05
18:48:56
上传
评论
收藏 3.78MB ZIP 举报
清纯献给了作业
- 粉丝: 328
- 资源: 12
最新资源
- Screenshot_20240427_031602.jpg
- 网页PDF_2024年04月26日 23-46-14_QQ浏览器网页保存_QQ浏览器转格式(6).docx
- 直接插入排序,冒泡排序,直接选择排序.zip
- 在排序2的基础上,再次对快排进行优化,其次增加快排非递归,归并排序,归并排序非递归版.zip
- 实现了7种排序算法.三种复杂度排序.三种nlogn复杂度排序(堆排序,归并排序,快速排序)一种线性复杂度的排序.zip
- 冒泡排序 直接选择排序 直接插入排序 随机快速排序 归并排序 堆排序.zip
- 课设-内部排序算法比较 包括冒泡排序、直接插入排序、简单选择排序、快速排序、希尔排序、归并排序和堆排序.zip
- Python排序算法.zip
- C语言实现直接插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序、归并排序、计数排序,并带图详解.zip
- 常用工具集参考用于图像等数据处理
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
评论0