HTML表单详解

表单详解

一、表单标签属性

表单标签：form
属性：action：当表单提交时，页面跳转的路径==》按钮为：submit
属性：method：表单提交方式(

​ get：默认。
​ 1、提交的数据会在地址栏中显示【不安全】
​ 2、速度快
​ 3、数据大小有限制
​ post
​ 1、数据不显现
​ 2、速度相对慢一些
​ 3、数据几乎无限制【可上传大文件】);

			name：用于数据传递时封装数据的名称
			value：表单提交时，传递的数据
			disabled：禁用。在浏览器中标签不能使用，并且标签的数据不能传递到下一个页面
			readonly：只读。在浏览器中标签不能使用，但显示效果没有任何改变，数据可传递

二、常见的表单元素

1.文本框

用户名：<input type="text" value="文本框" />

2.密码框

密码：<input type="password" value="123" />

3.单选按钮

性别：<input type="radio" name="sex"  />男
	<input type="radio" name="sex"  />女
	<!--3单选按钮,name名称相同，代表一组数据 ，选中checked -->

4.复选框

<!--4复选框，name名称相同，代表一组数据 ，选中checked -->
<p>爱好：<input type="checkbox" name="love" />篮球
<input type="checkbox" name="love" />羽毛球</p>

5.下拉框

<p>地址：
		<select name="shen" onchange="alert(1)"> //每当值改变，弹出警告框
			<option value="湖南">湖南省</option>
			<option value="广东">广东省</option>
		</select>
		<select name="shi" onchange="alert(1)">
			<option value="chenzhou">郴州</option>
			<option value="cs">长沙</option>
		</select>
</p>

6.多行文本域

<!--多行文本域：textarea设置，行rows和列cols-->
描述：<textarea rows="5" cols="20"></textarea>

7.文件域

<p>上传：<input type="file" name="file" /></p>

8.隐藏域

<!--隐藏域：hidden不会在浏览器中显示，但隐藏域中的数据在表单提交时，会传递到下一个页面-->
<input type="hidden" name="id" value="1001" />

9.普通按钮

<input type="button" value="按钮" />

10.提交按钮

<input type="submit" value="提交" />

11.重置按钮

<input type="reset" value="重置" />

12.图片按钮

<!--4图片按钮==》提交按钮效果一样-->
<input type="image" src="提交.png" />

13.邮箱

<p>邮箱：<input type="email" name="email" /></p>
<!--邮件:email必须包含@符号，并且前后必须有内容-->

14.数字

<!--数字:number只能输入指定范围的数字，max最大，min最小进行限制-->
<p>年龄：<input type="number" name="age" max="100" min="0" step="5" /></p>

15.滑块

<!--滑块-->
<p>范围：<input type="range" name="range" min="1" max="8" /></p>

16.网址

<p>网址：<input type="url" name="url" /></p>
<!--网址:url输入的内容必须包含协议，http:// 、 ftp:// ，协议后面有内容-->

17.搜索

<p>请输入：<input type="search"  /></p>

三、表单新增属性

1.placeholder：输入框中没有内容时的提示信息，当value中有值时，则会消失/清除

2.required：非空验证。表单提交时，标签设置了该属性，则必须输入内容，否则报错，页面不跳转

3.pattern：正则表达式。表单提交时，内容与格式不匹配，则报错，页面不跳转

四、表单选择器

语法	描述	返回值
:input	匹配所有input、textarea、select和button元素	元素集合
:text	匹配所有单行文本	元素集合
:password	匹配所有密码框	元素集合
:radio	匹配所有单选按钮	元素集合
:checkbox	匹配所有复选框	元素集合
:submit	匹配所有提交按钮	元素集合
:reset	匹配所有重置按钮	元素集合
:button	匹配所有按钮	元素集合
:image	匹配所有图片按钮	元素集合
:file	匹配所有文件域	元素集合

<!--举例-->
<form>
				<div class="form" id="myform" name="myform" action="#" method="get">
					<div class="form-title">
						<span>注册账号</span>
					</div>
					<div class="form-main">
						<div class="from-list">
							<span>昵称</span>
							<div class="form-text">
								<input type="text" name="user" />
							</div>
						</div>
						<div class="form-list">
							<span>邮箱</span>
							<div class="form=text">
								<input type="text" id="email" />
							</div>
						</div>
						<div class="form-list">
							<span>密码</span>
							<div class="form-text">
								<input type="password" name="password" />
							</div>
						</div>
						<div class="form-list">
							<span>再次密码</span>
							<div class="form-text">
								<input type="password" name "password1" />
							</div>
						</div>
						<div class="form-list gender">
							<span>性别</span>
							<div class="form-text">
								<label><input type="radio" value="男" name="gender" checked>男</label>
								<label><input type="radio" value="女" name="gender">女</label>
							</div>
						</div>
						<div class="form-text">
							<span>生日</span>
							<div class="form-text">
								<select>
									<option>2021年</option>
									<option>2022年</option>
									<option>2023年</option>
								</select>
								<select>
									<option>1月</option>
								</select>
								<select>
									<option>22日</option>
								</select>
							</div>
						</div>
						<div class="form-list">
							<span>爱好</span>
							<div>
								<div class="ortherinput">
									<input type="checkbox" />读书
									<input type="checkbox" />编程
									<input type="checkbox" />运动
								</div>
							</div>
						</div>
						<div class="form-list">
							<span>头像</span>
							<div>
								<div class="ortherinput">
									<input type="image" src="../../ch02/img/1.jpg" width="90px" height="80px" />
									<input type="file" />
								</div>
							</div>
						</div>
						<div class="form-list">
							<span>所在地</span>
							<div class="form-text">
								<select>
									<option>湖南省</option>
								</select>
								<select>
									<option>郴州市</option>
								</select>
								<select>
									<option>苏仙区</option>
								</select>
							</div>
						</div> 
						<div class="form-list">
							<span>手机号</span>
							<div class="from-text">
								<input type="text" id="mobile" />
							</div>
						</div>
						<div class="prompt">
							<p>可通过改手机号码快速找回密码</p>
							<p>中国大陆以外手机号码
								<a href="javascript:void(0);" id="showcode">点击这里</a>
							</p>
						</div>
						<div class="code">
							<input type="text" /><span>获取短信验证码</span>
						</div>
						<div class="deal">
							<p><label><input type="checkbox" class="acc" id="deal" checked />我已阅读并 同意相关服务条款和隐私政策</label></p>
							<span></span>
							<div class="deal-list">
								<a href="#">《账户规则》</a>
								<a href="#">《服务协议》</a>
								<a href="#">《隐私政策》</a>
							</div>
						</div>
					</div>
			</form>

<script type="text/javascript">
	console.log($("form:input").length);//控制台输出节点长度
	console.log($("form:text").length);
	console.log($("form:password").length);
	console.log($("form:radio").length);
	console.log($("form:checkbox").length);
	console.log($("form:submit").length);
	console.log($("form:reset").length);
	console.log($("form:button").length);
	console.log($("form:image").length);
	console.log($("form:file").length);
</script>

五、表单属性过滤选择器

语法	描述	返回值
:enabled	匹配所有可用元素	元素集合
:disabled	匹配所有不可用元素	元素集合
:checked	匹配所有被选中元素（复选框、单选按钮、下拉列表）	元素集合
:selected	匹配select所选中的option	元素集合

<form>
				<div class="form" id="myform" name="myform" action="#" method="get">
					<div class="form-title">
						<span>满意度调查</span>
					</div>
					<div class="form-main">
						<div class="form-list">
							<span>所乘车牌</span>
							<div class="form-text">
								<input type="text" name="code" value="京888888" disabled="disabled" />
							</div>
						</div>
						<div class="form-list">
							<span>您的年龄</span>
							<div>
								<div class="ortherinput">
									<select>
										<option>18-25岁</option>
										<option selected="selected">25-35岁</option><!--//默认选择-->
										<option>35岁以上</option>
									</select>
								</div>
							</div>
						</div>
						<div class="form-list">
							<span>您的学历</span>
							<div>
								<div class="ortherinput">
									<select name="education">
										<option value="juniorcollege">大专</option>
										<option value="undergraduate" selected="selected">本科</option>
										<option value="bachejordegree">本科以上</option>
									</select>
								</div>
							</div>
						</div>
						<div class="form-list">
							<span>您对本次出行体验是否满意</span>
							<div>
								<div class="ortherinput">
									<input type="radio" name="satisfaction" value="verysatisfied" />非常满意
									<input type="radio" name="satisfaction" value="satisfied" />满意
									<input type="radio" name="satisfaction" value="commonly" checked="checked" />一般
									<input type="radio" name="satisfaction" value="dissatisfied" />不满意
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>

<script type="text/javascript">
	$("form:enabled");//选取除“所选车牌”框外的所有表单元素
	$("form:disabled"); //选取“所选车牌”框
	$("form:radio:checked");//选取单选框中的“一般”
	$("form:selected");//选取下拉表选中的“25-35”和“本科”
</script>

正则表达式详解跳转