html表单标签
1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.学习表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get 提交方式
get:可以在url中看见信息，不安全，但高效
post:比较安全，可以传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!-- 文本输入框：input type="text" -->
<!--
value="用户名字" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框长度
readonly 只读标签
disable 禁用标签
hidden 隐藏域
placeholder 提示信息
required 非空判断
pattern 正则表达式 查询地点：https://www.cnblogs.com/yibuyi-123/p/14661160.html
-->
<p>名字: <input type="text" name="uesrname" placeholder="请输入用户名" required="required"></p>
<!-- 密码框：input type="password" -->
<p>密码: <input type="password" name="password"></p>
<!-- 单选框标签
input type="radio"
value : 单选框的值
name : 表示组
-->
<p>性别:
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- 多选框
input type="checkbox"
-->
<p>爱好:
<input type="checkbox" value="Basketball" name="hobby">篮球
<input type="checkbox" value="Play game" name="hobby" checked="checked">玩游戏
<input type="checkbox" value="Chat" name="hobby">聊天
<input type="checkbox" value="girl" 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="../resources/image/img1.jpg" >
</p>
<!-- 下拉框，列表框-->
<select name="国家" >
<option value="China">中国</option>
<option value="America">美国</option>
<option value="Russia">俄国</option>
<option value="England" selected="selected">英国</option>
<option value="France">法国</option>
</select>
<!-- 文本域
cols 列
rows 行
-->
<p>反馈:
<textarea name="textarea" cols="80" rows="20">文本内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type="file" name="files">
<input type="button" name="upload" 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="10" value="10">
</p>
<!-- 滑块 -->
<p>滑块:
<input type="range" name="range" min="0" max="100" step="2">
</p>
<!-- 搜索框 -->
<p>搜索:
<input type="search" name="search">
</p>
<!-- 增强鼠标可用性 -->
<p>
<label for="mark">点击会跳走</label>
<input type="text" id="mark">
</p>
<p>自定义邮箱:
<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<!-- submit 提交按钮
reset 提交重置按钮
-->
<p>
<input type="submit" >
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
运行结果：
2384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
