<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习-登陆注册</title>
</head>
<body>
<h1>注册</h1>
<form action="表格.html" method="get">
<!--表单form
action：表单提交的位置，可以是网站，也可以是请求处理地址
method：提交方式，分为get、post
post：url中看不到提交的信息，相对安全，但可以开发者模式->Network->Headers->Query String Parameters中看到，这一层加密需用到其他技术，在可以传输大文件
get:可以在url中看到提交的信息，不安全但是高效
id：以后用js对某个节点（例如某个输入框、某个单选框）操作（增删改）以达到动态效果时，需要找到这个节点，而找到节点就是根据id来寻找的
表单元素一般要定义name属性，因为后序脚本是按照元素名来获取提交值的
-->
<!--input type="text":文本输入框
value:框内默认值
maxLength：最大长度
size：文本框长度
readonly：该框只读不可改
disabled：效果 同上
hidden：隐藏框，有时需要传递默认值时使用
placeholder：文本框为空时提示用户信息
required：框不能为空
pattern：通过正则表达式验证
-->
<p>username:<input type="text" name="UserName" value="admin" disabled></p>
<p>password:<input type="password" name="Password" placeholder="请输入密码"></p>
<!--<input type="radio" value=“boy” name=“sex”/>男:单选框
<input type="radio" value=“girl” name=“sex”/>女
radio：表示单选框
value：表示选择了“男”返回“boy”值
name：声明该单选框属于哪一组，将如果多个单选框都设置为同一组，才能达到只能“单选”的效果
disabled:禁用选项，无法选中
尖括号外表示显示出来的选项名
-->
<p>性别：
<input type="radio" value=“boy” name=“sex” disabled/>男
<input type="radio" value=“girl” name=“sex”/>女
</p>
<!-- 多选框
checked：默认选中
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="coding " name="hobby">代码
</p>
<!--按钮
input type="image":图片按钮
input type="submit":提交框//submit框（必需）和Reset框（非必需）只能作为表单最后元素
input type="button"：普通按钮
-->
<p>按钮
<input type="button" name="btn1" value="点一下，反正并没有反应">
</p>
<!--下拉框，列表框
selected：表示这个是默认选项
-->
<p>国籍：
<select name="列表名称" id="">
<option value="China">中国</option>
<option value="Russia" selected>俄罗斯</option>
</select>
</p>
<!--文本域
-->
<p>反馈
<textarea name="feedback" cols="30" rows="10"></textarea>
</p>
<!--文件域
-->
<p>上传文件
<input type="file" name="files">
<input type="button" value="上传" name="filebutton">
</p>
<!--简单验证
type为number的情况下
step：每一次增减的幅度大小
-->
<p>商品数量
<input type="number" name="merchandiseNumber" max="99" min="1" step="1">
</p>
<!--滑块
-->
<p>音量
<input type="range" name="voice" max="100" min="0" step="5">
</p>
<!--搜索框
-->
<p>搜索
<input type="search" name="search" >
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表单学习。
最新推荐文章于 2024-11-03 11:01:20 发布
扫一扫
27万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
