表单语法
<form method="post" action="result.html">
<p>名字：<input name="name" type="text"></p>
<p>密码：<input name="pass" type="password"></p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="submit" name="Reset" value="重填"/>
</p>
</form>规定如何发送表单数据常用值：get | post
表示向何处放送表单数据 ：action="result.html
表单的基本语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post：比较安全，可以传输大文件
-->
<form action="我的网页.html" method="get">
<!--文本输入框：input type="text"-->
<p>名字:<input type="text" name="username"/> </p>
<!--密码框:input type="password="-->
<p>密码:<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>表单元素格式
type：指定元素的类型。text，password，checkbox，radio，submit，reset，flie，hidden，image和button，默认为text。
name：指定表单元素的名称
value：元素的初始值。type为radio时必须指定一个值
size：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength：type为text或者password时，输入的最大字符数
checke：type为radio或checkbox时，指定按钮是否是被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
-->
<form action="我的网页.html" method="get">
<!--文本输入框：input type="text"
value="张鑫" 默认的初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<p>
名字:<input type="text" name="username"/>
</p>
<!--密码框:input type="password="-->
<p>
密码:<input type="password" name="pwd">
</p>
<!--单选框标签:
input type="radio"
value:单选框的值
name：表示组数（如果组数相同就能选一个，组数不同就能全选）
-->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>按钮和多选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
-->
<form action="我的网页.html" method="get">
<!--文本输入框：input type="text"
value="张鑫" 默认的初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<p>
名字:<input type="text" name="username"/>
</p>
<!--密码框:input type="password="-->
<p>
密码:<input type="password" name="pwd">
</p>
<!--单选框标签:
input type="radio"
value:单选框的值
name：表示组数（如果组数相同就能选一个，组数不同就能全选）
-->
<p>性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
input type="checkbox"
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit"提交按钮
input type="reset" 重置
-->
<p>按钮:
<input type="button" value="点击变长"/>
<input type="image" src="../../resources/image/01.JPG">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>列表框文本域和文件域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
-->
<form action="我的网页.html" method="get">
<!--文本输入框：input type="text"
value="张鑫" 默认的初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<p>
名字:<input type="text" name="username"/>
</p>
<!--密码框:input type="password="-->
<p>
密码:<input type="password" name="pwd">
</p>
<!--单选框标签:
input type="radio"
value:单选框的值
name：表示组数（如果组数相同就能选一个，组数不同就能全选）
-->
<p>性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
input type="checkbox"
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit"提交按钮
input type="reset" 重置
-->
<p>按钮:
<input type="button" value="点击变长"/>
<input type="image" src="../../resources/image/01.JPG">
</p>
<!--下拉框，列表框
-->
<p>国家:
<select name="列表名称">
<option value="选择的值">中国</option>
<option value="选择的值">美国</option>
<option value="选择的值" selected>印度</option>
<option value="选择的值">瑞士</option>
</select>
</p>
<!--文本域
cols是:行
roes:列
-->
<p>反馈:
<textarea name="textarea" cols="50" 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="submit">
<input type="reset">
</p>
</form>
</body>
</html>特殊按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
-->
<form action="我的网页.html" method="get">
<!--文本输入框：input type="text"
value="张鑫" 默认的初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<p>
名字:<input type="text" name="username"/>
</p>
<!--密码框:input type="password="-->
<p>
密码:<input type="password" name="pwd">
</p>
<!--单选框标签:
input type="radio"
value:单选框的值
name：表示组数（如果组数相同就能选一个，组数不同就能全选）
-->
<p>性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
input type="checkbox"
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit"提交按钮
input type="reset" 重置
-->
<p>按钮:
<input type="button" value="点击变长"/>
<input type="image" src="../../resources/image/01.JPG">
</p>
<!--下拉框，列表框
-->
<p>国家:
<select name="列表名称">
<option value="选择的值">中国</option>
<option value="选择的值">美国</option>
<option value="选择的值" selected>印度</option>
<option value="选择的值">瑞士</option>
</select>
</p>
<!--文本域
cols是:行
roes:列
-->
<p>反馈:
<textarea name="textarea" cols="50" 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>
<!--URL-->
<p>
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
<input type="number" name="number" max="100" min="0" step="1">
</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>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>表单的应用
- 隐藏域 hidden
- 只读 readonly
- 禁用 disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
acction ：表单提交的位置，可以是网站，也可以是个请求地址
method：post，get 提交方式
-->
<form action="我的网页.html" method="get">
<!--文本输入框：input type="text"
value="张鑫" 默认的初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
-->
<p>
名字:<input type="text" name="username" value="admin" readonly/>
</p>
<!--密码框:input type="password="-->
<p>
密码:<input type="password" name="pwd" hidden>
</p>
<!--单选框标签:
input type="radio"
value:单选框的值
name：表示组数（如果组数相同就能选一个，组数不同就能全选）
-->
<p>性别:
<input type="radio" value="boy" name="sex" checked disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框
input type="checkbox"
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit"提交按钮
input type="reset" 重置
-->
<p>按钮:
<input type="button" value="点击变长"/>
<input type="image" src="../../resources/image/01.JPG">
</p>
<!--下拉框，列表框
-->
<p>国家:
<select name="列表名称">
<option value="选择的值">中国</option>
<option value="选择的值">美国</option>
<option value="选择的值" selected>印度</option>
<option value="选择的值">瑞士</option>
</select>
</p>
<!--文本域
cols是:行
roes:列
-->
<p>反馈:
<textarea name="textarea" cols="50" 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>
<!--URL-->
<p>
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
<input type="number" name="number" max="100" min="0" step="1">
</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>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>表单初级验证
- 思考为什么要进行表单验证
- 常用方式
- placeholder 提示信息
- require 非空判断
- pattern 正则表达式
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
