表单
- 文本框:
<input type="text" name=“文本框”/>
- 密码框:
<input type="password" name=“密码框”/>
- 隐藏域:
<input type="hidden" name=“你看不见我”/>
- 邮箱:
<input type="email" name="邮箱"/>
- 只读:
<input name="你不能改" type="text" value="张三" readonly>
- 禁用:
<input type="你不能按 value="修改" disabled>
- 单选按钮:
<form method="post" action="">
性别:
<input name="gen" type="radio" class="input" value="男" checked/>男
<input name="gen" type="radio" value="女" class="input"/>女
</form>
- 复选框:
<form method="post" action="">
爱好:
<input type="checkbox" name="interest" value="sports" checked />运动
<input type="checkbox" name="interest" value="talk"/> 聊天
<input type="checkbox" name="interest" value="play"/> 玩游戏
</form>
- 下拉列表框:加selected代表默认否则默认第一个
<form method="post" action="">
出生日期:
<input name="byear" value="yyyy" size="4" maxlength="4"/> 年
<select name="bmon" >
<option value="">[选择月份]</OPTION>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
<option value="7">七月</option>
<option value="8">八月</option>
<option value="9">九月</option>
<option value="10" selected>十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select> 月
<input name="bday" value="dd" size="2" maxlength="2" /> 日
</form>
- 按钮:
<form method="get" action="">
<p>
<input type="reset" name="butReset" value="重置t按钮"/>
<input type="submit" name="butSubmit" value="提交按钮"/>
<input type="button" name="butButton" value=”普通按钮" onclick="alert(this.value)"/>
<!--<input type="image" src="images/login.gif" />-->
</p>
</form>
- 文本域:
<form method="post" action="">
<P>
<textarea name="textarea" cols="40" rows="6">
自信、活泼、善于思考...
</textarea>
</P>
</form>
- 上传文件:
<form action="" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="files"/><br/>
<input type="submit" name="upload" value="上传"/>
</p>
</form>
- 上传文件:
<form action="" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="files"/><br/>
<input type="submit" name="upload" value="上传"/>
</p>
</form>
- 打开网址:
<form action="#" method="post">
<p>
请输入你的网址:
<input type="url" name="userUrl"/>
</p>
<input type="submit"/>
</form>
- 数字及其加减按钮:
<form action="#" method="post">
<p>
请输入数字:
<input type="number" name="num" min="0" max="100" step="10"/>
</p>
<input type="submit"/>
</form>
-滑块:
<form action="#" method="post">
<p>
<input type="range" name="range1" min="0" max="10" step="2"/>
</p>
</form>
-搜索框:
<form action="#" method="post">
<p>
请输入搜索的关键词:
<input type="search" name="sousuo" />
<input type="submit" value="Go"/>
</p>
</form>
-表单的验证:
- placeholder:当文本框中无内容时提示语显示
<form action="#" method="post">
<p>
请输入搜索的关键词:
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
<input type="submit" value="Go"/>
</p>
</form>
- required:规定文本框填写内容不能为空,否则不允许用户提交表单
<form action="#" method="post">
<p>
用户名:
<input type="text" name="username" required/>
<input type="submit" value="提交"/>
</p>
</form>
- pattern:用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单
<form action="#" method="post">
<p>
电话号码:
<input type="text" name="tel" required pattern="^1[358]\d{9}" /> *以13、15、18开头的11位数字 <br/>
<input type="submit" value="提交"/>
</p>
</form>