HTML网页表单
表单元素格式
属性 | 说明 |
---|---|
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text |
name | 指定表单元素的名称 |
value | 元素的初始值。type为radio时必须指定一个值 |
size | 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | type为text或password时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否被选中 |
表单的初级验证
常用方式:
- placeholder 该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
- required 规定必需在提交之前填写输入字段。如果使用该属性,则字段是必填(或必选)的。
- pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。
表单的应用
- 隐藏域
- 只读
- 禁用
综合实例
实例中注释对表单各个组件与属性进行了讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习表单</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” 文本框的长度
-->
<p>名字:<input type="text" name="用户名" placeholder="请输入用户名" maxlength="8" size="30" required></p>
<!--密码框-->
<p>密码:<input type="password" name="用户密码" required ></p>
<!--单选框标签<input type="radio“
value 单选框的值
name 表示组
-->
<p>性别:
<input type="radio" name = "性别" value="boy">男
<input type="radio" name = "性别" value="girl">女
</p>
<!--多选框<input type="checkbox"-->
<p>爱好:
<input type="checkbox" value="sleep" name="爱好">睡觉
<input type="checkbox" value="game" name="爱好">玩游戏
<input type="checkbox" value="eat" name="爱好">吃饭
<input type="checkbox" value="chat" name="爱好">聊天
</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/lufei.jpg">
</p>
<!--下拉框 列表框
-->
<p>下拉框:
<select name="列表名称">
<option value="china">中国</option>
<option value="America">美国</option>
<option value="English">英国</option>
<option value="France">法国</option>
</select>
</p>
<!--文本域
cols="50" 文本域长度
rows="10" 文本域宽度
-->
<p>反馈:
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域
<input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" name="上传" value="upload">
</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">
</p>
<!--滑块
<input type="range"
-->
<p>音量:
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<!--增强鼠标可见性-->
<p>
<label for="mark">你点我试试:</label>
<input type="text" id="mark">
</p>
<!--自定义邮箱
pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" 正则表达式
-->
<p>自定义邮箱:
<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>
<input type="submit"> <!--提交-->
<input type="reset"> <!--重置-->
</p>
</form>
</body>
</html>