HTML表单
1.表单的语法
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="succss.html">action表示表单提交地址
请输入您要输入的内容：<textarea rows="10px" cols="20px"></textarea><br>
请输入您的网址：<input type="url" /><br>
请选择文件：<input type="file" /><br>
请输入邮箱：<input type="email" /><br>
请输入数值：<input type="number" min="0" max="100" step="2" /><br>
请滑动滑块选择数值：<input type="range" min="0" max="10" step="2"/><br>
请输入搜索内容：<input type="search" /><br>
<input type="submit" value="登录" />
</form>
</body>
</html>
2.表单属性说明
3.表单元素
3.1文本框
用户名:<input type="text" name="userName" value="请输入您的用户名"/><br>
3.2密码框
密码：<input type="password" required pattern="[\dA-Za-z]{6,16}" /><br>
3.3单选按钮
性别:
<input type="radio" name="sex" id="man"/><label for="man">男</label><!-- label字体按钮 -->
<input type="radio" name="sex" id="woman"/><label for="woman">女</label><br>
3.4复选框
请选择您的兴趣爱好：<input type="checkbox" value="bsb" />篮球
<input type="checkbox" value="boot" />足球
<input type="checkbox" value="game" />游戏
<input type="checkbox" value="run" />跑步
<input type="checkbox" value="paly" />旅游<br>
3.5列表框
<select name="生日">
<option value ="year">1990</option>
<option value ="year">1991</option>
<option value ="year"selected>1992</option>selected默认选中
<option value ="year">1993</option>
</select>
3.6按钮
<input type="button" value="普通按钮" />
<input type="image" src="../file/11.jpg" width="100px" height="100px" />
<input type="reset" value="重置按钮" />
<input type="submit" />
3.7多行文本域
<textarea rows="10" cols="10">
</textarea>
3.8邮箱
请输入邮箱：<input type="email" /><br>
3.9网址
请输入您的网址：<input type="url" /><br>
3.10数字
请输入数值：<input type="number" min="0" max="100" step="2" /><br>
3.11滑块
请滑动滑块选择数值：<input type="range" min="0" max="10" step="2"/><br>
3.12搜索框
请输入搜索内容：<input type="search" /><br>
4.人人网注册网页
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="succss.html">
<p><label for="emali">注册邮箱</label><input type="text" id="emali" maxlength="50" placeholder="student@qfedu.com" /></p><br>
<p><label for="mima">密码</label><input type="password" placeholder="请输入注册密码" maxlength="16"id="mima"/></p><br>
<p><label for="name">姓名</label><input type="text" id="name" placeholder="请输入您的姓名" maxlength="8" /></p><br>
<p>性别：<input type="radio" name="sex" id="man" checked="checked" /><label for="man">男</label>
<input type="radio" name="sex" id="woman" /><label for="woman">女</label></p><br>
<p>选择身份
<select disabled>
<option value ="geren">个人</option>
<option value ="qiye">企业</option>
</select></p>
<p>生日
<select name="生日">
<option value ="year">1990</option>
<option value ="year">1991</option>
<option value ="year"selected>1992</option>
<option value ="year">1993</option>
</select>
<select>
<option value ="mon">1月</option>
<option value ="mon">2月</option>
<option value ="mon">3月</option>
<option value ="mon">4月</option>
<option value ="mon">5月</option>
<option value ="mon" selected>6月</option>
</select>
<select>
<option value ="day">1月</option>
<option value ="day">2月</option>
<option value ="day">3月</option>
<option value ="day">4月</option>
<option value ="day">5月</option>
</select>
</p>
<p><label for="num">验证码</label><input type="text"placeholder="请输入验证码" id="num"/></p><br>
<input type="image" src="../file/a.jpg" width="30px" height="30px"/>
</form>
</body>
</html>
5.表单的高级应用
5.1隐藏域
隐藏域：<input type="hidden" name="hiddenName" value="yincangyu" /><br>
5.2只读和禁用
只读文本框:<input type="text" name="fileName" readonly value="只读内容" /><br>
<input type="button" disabled value="禁用按钮" />disabled禁用
6.表单元素的标注
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
<p><label for="emali">注册邮箱</label><input type="text" id="emali" maxlength="50" placeholder="student@qfedu.com" /></p><br>
<p><label for="mima">密码</label><input type="password" placeholder="请输入注册密码" maxlength="16"id="mima"/></p><br>
<p><label for="name">姓名</label><input type="text" id="name" placeholder="请输入您的姓名" maxlength="8" /></p><br>
<p>性别：<input type="radio" name="sex" id="man" checked="checked" /><label for="man">男</label>
7.placeholder
input类型的文本框提供一种提示
可以描述期待用户输入何种内容
提示语默认显示，当文本框中输入内容时默认提示语消失
适用于input标签:text,search,rul,email,password等类型
<p><label for="emali">注册邮箱</label><input type="text" id="emali" maxlength="50" placeholder="student@qfedu.com" /></p><br>
<p><label for="mima">密码</label><input type="password" placeholder="请输入注册密码" maxlength="16"id="mima"/></p><br>
<p><label for="name">姓名</label><input type="text" id="name" placeholder="请输入您的姓名" maxlength="8" /></p><br>
<p>性别：<input type="radio" name="sex" id="man" checked="checked" /><label for="man">男</label>
8.required
规定文本框内容不能为空，否则不允许用户提交表单
适用于input标签：text,search,url,email,password,number,checkbox,redio,file等类型
<form action="succss.html" >
<img src="../file/22.jpg" width="500px" height="300px" >
<p>账号注册</p>
<label for="name">昵称</label><input type="text"id="name" required placeholder="请输入您要注册的昵称" pattern="[-\w\u4E00-\u9FA5]{4,10}" />长度为4-10个字符<br>
<br>
<label for="password">密码</label><input type="password" id="password" required placeholder="请输入密码" pattern="[\dA-Za-z]{6,16}" />长度为6-16个字符<br>
<br>
<label for="passwords">确认密码</label><input type="password" id="passwords" required placeholder="请确认密码" pattern="[\dA-Za-z]{6,16}" />长度为6-16个字符<br>
<br>
<label for="tel">手机号码</label><input type="text"id="tel" placeholder="请输入手机号码" required pattern="1[3578]\d{9}" /><br>
<br>
<label for="year">年龄</label><input type="text" id="year" placeholder="请输入您的年龄" required pattern="\d|[1-9]\d|1[0-2]\d" /><br>
<br>
<input type="submit" style="background-color: red;" value="come baby" />
</form>
9.pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
<label for="tel">手机号码</label><input type="text"id="tel" placeholder="请输入手机号码" required pattern="1[3578]\d{9}" /><br>
<br>
<label for="year">年龄</label><input type="text" id="year" placeholder="请输入您的年龄" required pattern="\d|[1-9]\d|1[0-2]\d" /><br>
10.QQ注册界面
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="succss.html" >
<img src="../file/22.jpg" width="500px" height="300px" >
<p>账号注册</p>
<label for="name">昵称</label><input type="text"id="name" required placeholder="请输入您要注册的昵称" pattern="[-\w\u4E00-\u9FA5]{4,10}" />长度为4-10个字符<br>
<br>
<label for="password">密码</label><input type="password" id="password" required placeholder="请输入密码" pattern="[\dA-Za-z]{6,16}" />长度为6-16个字符<br>
<br>
<label for="passwords">确认密码</label><input type="password" id="passwords" required placeholder="请确认密码" pattern="[\dA-Za-z]{6,16}" />长度为6-16个字符<br>
<br>
<label for="tel">手机号码</label><input type="text"id="tel" placeholder="请输入手机号码" required pattern="1[3578]\d{9}" /><br>
<br>
<label for="year">年龄</label><input type="text" id="year" placeholder="请输入您的年龄" required pattern="\d|[1-9]\d|1[0-2]\d" /><br>
<br>
<input type="submit" style="background-color: red;" value="come baby" />
</form>
</body>
</html>
浙公网安备 33010602011771号