目录
1.表单语法
<!-- method:提交表单数据的方式get/post
action:向何处发送表单数据 -->
<form method="post" action="main.html">
<p>名字:<input name="name" type="text"/></p>
<p>密码:<input name="pwd" type="password"/></p>
<p><input name="Button" type="submit" value="提交"/>
<input name="Reset" type="reset" value="重填"/></p>
</form>
2.表单元素格式
<input name="input框名称" type="input框类型" value="input框的值"/>
type:类型(默认text、password、checkbox、radio、submit、reset、file、hidden、image、button)
name:表单元素名称
value:初始值(type为radio时必须有值)
size:初始宽度(type为text和password时,大小以字符为单位;其他类型,宽度以像素为单位)
maxlength:输入的最大字符数
checked:(radio、checkbox)按钮是否被选中
3.表单元素
-
文本框
<input name="文本框名称" type="text" value="文本框的值" size="文本框长度" maxlength="文本框可输入最多字符"/>
-
密码框
<input name="密码框名称" type="password" size="密码框长度" maxlength="文本框可输入最多字符"/>
-
单选按钮(radio:单选按钮 name:表示一组)
<input name="单选框名称" type="radio" value="值" checked/>男 <input name="单选框名称" type="radio" value="值"/>女
-
复选框(checkbox:复选框 / checked:表示复选框选中状态 name:表示一组)
<input type="checkbox" name="名称" value="值"/>运动 <input type="checkbox" name="名称" value="值" checked />聊天 <input type="checkbox" name="名称" value="值"/>玩游戏
-
列表框(selected="selected":表示默认选中项)
<select name="列表名称" size="行数"> <option value="选项的值" selected="selected">…</option> <option value="选项的值">…</option> </select>
-
按钮
<input type="reset" name="butReset" value="按钮值">重置 <input type="submit" name="butSubmit" value="按钮值">提交 <input type="button" name="butButton" value="按钮值"/>普通按钮 <input type="image" src="路径"/> <button>按钮(可提交,form表单外可用) </button>
-
多行文本框(textarea:多行文本域)
<textarea name="showText" cols="显示的列数" rows="显示的行数">内容 </textarea>
-
文件域(enctype="multipart/form-data":表单编码属性)
<form action="" method="post" enctype="multipart/form-data"> <p><input type="file" name="files" /> <input type="submit" name="upload" value="上传" /></p> </form>
-
邮箱(会自动验证邮箱格式是否正确)
<p>邮箱:<input type="email" name="email"/></p> <input type="submit"/>
-
网址(会自动验证url地址格式是否正确)
<p>请输入你的网址:<input type="url" name="userUrl"/></p> <input type="submit"/>
-
数字
<p>请输入数字:<input type="number" name="num" min="最小值" max="最大值" step="合法的数字间隔"/></p> <input type="submit"/>
-
滑块
<p>请输入数字:<input type="range" name="range1" min="最小值" max="最大值" step="2"/></p> <input type="submit"/>
-
搜索框
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p> <input type="submit"/>
4.表单的高级应用
-
隐藏域(hidden)
<input type="hidden" value="666" name="userid">
-
只读(readonly)
<input name="name" type="text" value="张三" readonly>
-
禁用(disabled)
<input type="submit " disabled value="保存" >
-
标注
<label for="male">标注的文本</label> <input type="radio" name="gender" id="male"/>
5.表单的初级验证
-
placeholder
提示语默认显示,当文本框中输入内容时提示语消失,适合于input标签:text、search、url、email和password等类型
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
-
required
规定文本框填写内容不能为空,否则不允许用户提交表单,适合于input标签:text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" name="username" required/>
-
pattern
用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表
<input type="text" name="tel" required pattern="正确的正则表达式"/>