表单浅谈
- action : 表单提交的位置，可以是网站，也可以是请求处理地址
method : post ，get 提交方式
get提交方式: 我们可以在url中看到我们提交的信息，不安全，高效
post: 比较安全，传输大文件。 - 文本输入框:input type=“text” name=“username”
value=“sssl” :默认初始值
maxlength=“8” : 最大限制字符数
size=“30” : 文本框的长度
readonly : 只读模式
disabled : 不能操作
hidden : 隐藏内容
placeholder: 提示信息
required ： 非空判断
pattern: 正则表达式 - 单选框标签
input type=“radio”
value=“boy” :单选框的值
name=“sex” : 表示组的含义 - 多选框
input type=“checkbox” value=“sleep” name=“hobby” - 按钮：
input type=“button” 普通按钮
input type=“image” 图像按钮
input type=“submit” 提交按钮
input type=“reset” 重置按钮 - 文件域
input type=“file” name=“files”
input type=“button” value=“上传” name=“upload”
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<form action="7.媒体元素.html" method="get">
<p>名字: <input type="search" name="username" maxlength="8" size="30" placeholder="请输入用户名" required></p>
<p>密码: <input type="password" name="pwd" value="123456" required></p>
<p>性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>爱好：
<input type="checkbox" value="sleep" name="hobby" checked disabled>睡觉
<input type="checkbox" value="coding" name="hobby">代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby" checked disabled>游戏
</p>
<p>按钮：
<input type="button" name="butt1" value="点击变长">
<input type="image" src="../resources/image/1.jpg" >
</p>
<p>下拉框：
<select name="列表名称">
<option value="china" hidden>中国</option>
<option value="japan">日本</option>
<option value="usa"selected>美国</option>
<option value="eth">瑞士 </option>
</select>
</p>
<p>反馈：
<textarea name="textarea" cols="10" rows="10">内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload" required>
</p>
<p>邮箱：
<input type="email" name="email" required>
</p>
<p>URL:
<input type="url" name="url" required>
</p>
<p>商品数量：
<input type="number" name="num" max="10" min="0" step="1" required>
</p>
<p>音量：
<input type="range" name="voice" min="0" max="10" step="1" required>
</p>
<p>搜索：
<input type="search" name="search" id="mark">
</p>
<p>
<label for="mark">你点我试试</label>
<input type="text">
</p>
<p>自定义邮箱：
<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>
<input type="submit" disabled>
<input type="reset" value="清空表单">
</p>
</form>
</body>
</html>
扫一扫
1287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
