表单
主要用来制作动态网页,方便和用户进行交互
名字name,密码pass,提交submit,重填reset
<input type=" " name=" " value=" ">
规定如何发送表单数据,常用值:get/post 表示向何处发送表单 <form method="post或者get" antion="result.html"> <p>名字:<input name="name" type="text" /></p> <p>密码:<input name="pass" type="paseeword" /></p> <p> <input type="submit" name="button" value="提交" /> <input type="reset" name="reset" value="重填" /> </p> </form>
在实际网页开发中通常采用post方式提交表单数据
input 元素类型 元素名称 元素的值 <input type=" " name=" " value=" ">
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时,指定按钮是否是被选中
常用的表单元素
<text>文本框
文本框 文本框名称 文本框初始值 文本框长度 文本框可输入最多字符 <input type="tsxt" name="usename" value="用户名" size="30" maxlength="20"/>
<password>密码框
单选按钮框 值 单选按钮选中的状态 <input type="password" name="pass" size="30" />
<radio>单选按钮
单选按钮框 值 单选按钮选中的状态 <input name="gen" type="radio" value="男" checked />男 <input name="gen" type="radio" value="女" />女
<checkbox>复选框
复选框 值 复选框选中的状态 <input type="checkbox" name="interest" value="sports" checked />运动 <input type="checkbox" name="interest" value="talk" />聊天 <input type="checkbox" name="interest" value="play" />玩游戏
<select>和<option>列表框
列表框 <select name="列表名称" size="行数"> 选项 默认选中的值 <option value="选项的值" selected="selected">…</option > <option value="选项的值">…</option ><in </select>
<button、submit和reset>按钮
重置按钮 按钮上显示的文字 <input type="reset" name="butReset" value="reset按钮"> 提交按钮 图片路径 <input type="image" src="images/login.gif" /> 普通按钮 <input type="button" name="butButton" value="button按钮"/>
多行文本域
多行文本域 线上的列数 显示的行数 <textarea name="showText" cols="x" rows="y">文本内容 </textarea >
<file>文件域
表单编码属性 <form action="" method="post" enctype="multipart/form-data"> 文件域 <p><input type="file" name="files" /> <input type="submit" name="upload" value="上传" /></p> </form>
<email>邮箱
邮箱 <p>邮箱:<input type="email" name="email"/></p> <input type="submit"/> 会自动验证Email地址格式是否正确
<url>网址
网址 <p>请输入你的网址:<input type="url" name="userUrl"/></p> <input type="submit"/> 会自动验证URL地址格式是否正确
<number>数字
数字 允许最小的值 允许最大的值 合法的数字间隔 <p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p> <input type="submit"/>
<range>滑块
滑块 允许最小的值 允许最大的值 合法的数字间隔 <p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p> <input type="submit"/>
<search>搜素框
搜素框 <p>请输入搜索的关键词:<input type="search" name="sousuo"/></p> <input type="submit"/>
表单的高级应用
隐藏域
隐藏域 <input type="hidden" value="666" name="userid">
只读与禁用
只读文本框 <input name="name" type="text" value="张三" readonly> 禁用 <input type="submit " disabled value="保存" >
表单的元素标注
表单元素的id <label for="id">标注的文本</label> 表单元素id <input type="radio" name="gender" id="male"/> 增强鼠标的可用性,自动将焦点转移到与该标注相关的表单元素上
表单初级验证的方法
placeholder占位符,文本框内容提示
文本框输入内容提升 <input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/> input类型的文本框提供一种提示,可以描述文本框期待用户输入何种内容,提示语默认显示,当文本框中输入内容时提示语消失,适合于input标签:text、search、url、email和password等类型
required必填项
必填项 <input type="text" name="username" required/> 规定文本框填写内容不能为空,否则不允许用户提交表单,适合于input标签:text、search、url、email、password、number、checkbox、radio、file等类型
pattern验证规则,正则表达式
验证规则,正则表达式 <input type="text" name="tel" required pattern="^1[358]\d{9}" /> 用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单