第三课 表单

表单

主要用来制作动态网页，方便和用户进行交互

名字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}" /> 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单