表单

语法

<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="reset" name="Reset" value="重填“/> </p></form>

method规定如何发送表单数据 常用值：get | post

action表示向何处发送表单数据

表单元素格式

<input type="text" name="fname" value="text"/>

文本框

<input type="text" name="userName" value="用户名" size="30" maxlength="20" />

密码框

<input type="password " name="pass" size="20" />

单选按钮

<input name="gen" type="radio" value="男" checked />男<input name="gen" type="radio" value="女" />女

复选框

<input type="checkbox" name="interest" value="sports"/>运动<input type="checkbox" name="interest" value="talk" checked />聊天<input type="checkbox" name="interest" value="play"/>玩游戏

列表框

<select name="列表名称" size="行数"><option value="选项的值" selected="selected">…</option ><option value="选项的值">…</option ></select>

按钮 图片按钮

<input type="reset" name="butReset" value="reset按钮"><input type="image" src="images/login.gif" /><input type="submit" name="butSubmit" value="submit按钮"> <input type="button" name="butButton" value="button按钮"/>

多行文本域

<textarea name="showText" cols="x" rows="y">文本内容 </textarea >

文件域

<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"/>

网址

<p>请输入你的网址:<input type="url" name="userUrl"/></p><input type="submit"/>

数字

<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p><input type="submit"/>

滑块

<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p><input type="submit"/>

搜索框

<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="保存" >

表单元素的标注

<label for="id">标注的文本</label><input type="radio" name="gender" id="male"/>

表单初级验证的方法

placeholder

input类型的文本框提供一种提示（hint） 可以描述文本框期待用户输入何种内容 提示语默认显示，当文本框中输入内容时提示语消失 适合于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="^1[358]\d{9}" />