form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<!--表单form
action : 表单提交的位置,可以是网站,也可以是一个请求处理地址
method : post , get 提交方式
get 方式提交: 我们可以在url中看到我们提交的信息,不安全,但是高效
post 方式提交: 比较安全, 传输大文件,
-->
<form action="01_firstHtmlWeb.html" method="get">
<!--文本输入框 : input type="text"
value = "mxy好帅" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
readonly 使此标签变为只读标签
placeholder 提示信息
required 非空判断,使此标签中的内容变为必填
-->
<p>名字: <input type="text" name="username" placeholder="请输入用户名" maxlength="8" size="30" required></p>
<!-- 密码框 : input type="password"
hidden : 隐藏此标签,隐藏域标签属性(可以提交但是无法显示)
-->
<p>密码: <input type="password" name="pwd" value="123456" hidden></p>
<!--单选框标签
input type="radio"
value : 单选框的值
name : 表示组
checked : 默认选中某一项就在最后加上checked就可以了
disabled : 禁用此标签
-->
<p>性别:
<input type="radio" value="boy" name="sex" disabled>男
<input type="radio" value="girl" name="sex" checked>女
</p>
<!--多选框 : checkbox
默认选中某一项就在最后加上checked就可以了
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="smoke" name="hobby">抽烟
<input type="checkbox" value="drink" name="hobby">泡吧
<input type="checkbox" value="game" name="hobby" checked>打游戏
</p>
<!--按钮
普通按钮: button
图像按钮: image
提交按钮: submit
重置按钮: reset
value属性可以用来更改按钮标签中的字符
-->
<p>按钮:
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resources/img/图片.png">
</p>
<!--下拉框, 列表框
selected: 加在value属性的后面可以默认显示有selected的值
提交表单之后会把name属性的值和value属性的值进行提交
-->
<p>国家:
<select name="列表名称">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="eth">瑞士</option>
<option value="French" selected>法国</option>
</select>
</p>
<!--文本域
cols: 列数
rows: 行数
-->
<p>反馈:
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮箱验证 -->
<p>
邮箱 : <input type="email" name="email">
</p>
<!--自定义邮箱
pattern : 正则表达式 , 验证各种格式输入是否正确 , 在百度搜索"常用正则表达式"复制粘贴即可
-->
自定义邮箱 : <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
<!--URL验证-->
<p>
URL : <input type="url" name="url">
</p>
<!--数字-->
<p>
商品数量 : <input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块-->
<p>
音量: <input type="range" name="voice" min="0" max="100">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<!--增强鼠标的可用性
label标签中的 for属性 指向input标签中的id属性
如果for属性和id属性的值相同 , 鼠标点击label标签的文字之后就会选中input标签
-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p><input type="submit">
<input type="reset" value="重置表单">
</p>
</form>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
