前端学习笔记day02--表单

最新推荐文章于 2024-07-17 09:43:10 发布

m0_38077048

最新推荐文章于 2024-07-17 09:43:10 发布

阅读量160

点赞数

分类专栏：学习自用文章标签： html html5

本文链接：https://blog.csdn.net/m0_38077048/article/details/108820651

版权

学习自用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端学习笔记day02–表单

1.表单定义：将客户端的数据提交给服务器，是用户和客户端的一种交互方式。

2.表单属性
<form action="1.html" method="get">
（1）action：提交数据到指定页面处理，即规定处理数据的路径，路径的写法是相对路径。

<1.html>的代码

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		是1223
	</body>
</html>

（2）method：表单的提交方式。常用的有两种。
get：该方法将表单数据明文显示在地址栏中。
优点：传输速度快；缺点：安全系数低，参数长度有限制。

post：将表单数据封装到对象里，不显示在地址栏。
优点：相对安全/参数长度没有限制；缺点：传输速度相比get方式慢。

3.表单元素
<input type="" name="" maxlength="" placeholder="" id="" value="" readonly/>
(1)input：定义单行文本输入域，用户可在其中输入文本。
(2)name：起传递参数的作用。如果不用name，get方法不会在地址栏显示参数。

在这里插入图片描述
get方法传递，在地址栏显示了name的参数phone。

在这里插入图片描述
post方法传递（因为HBuilder没有内置的post服务器，因此传输报错），地址栏没有显示参数。

(3)value：传递参数的值，在网页中显示配置的默认值（包括按钮），用户可以修改该值。

		<form action="1.html" method="get">
			<p>
				<input type="text" name="phone" value="123"><br/>
			</p>
				<input type="submit" value="提交">
		</form>

文本框中的“123”和按钮上的“提交”都是由value设置的
在这里插入图片描述
（4）type：表单元素的类型。
---->1）text：没有指定类型时的默认类型，表现为一个可编辑的文本框。文本框高度固定，可用size来调整文本框长度。（下图中“常用邮箱”选项是默认长度，“姓名”选项是调整过的长度）

	<p>
		姓名：<input type="text" size="10">
	</p>

在这里插入图片描述
---->2）password：密码，用掩码显示。

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

在这里插入图片描述
---->3）checked：设置默认项，完整写法为checked="checked"，在HTML5中，如果属性和属性值相同，可以只写属性名，如：checked=“checked”，可简写为checked。

---->4）radio：单选框，radio有name、value、checked、id等属性。如果name属性不相同，则会产生复选的情况。

			<input type="radio" name="" value="" checked id=""/>

		性别：<input name="sex" type="radio" value="man" checked/>
				<input name="sex" type="radio" value="woman"/>女

在这里插入图片描述
如果name属性值不同，则会产生复选的情况（将上面的性别代码中name属性值分别改为sex1和sex2）

---->5）pattern：用正则表达式来进行精确的限制。<input type="text" name="" pattern="">，我们设定文本框内输入一个电话号码，需要做一些限定。<input type="text" name="" pattern="^1[]\d{}">^在[]中直接使用表示否定，这里表示限定开头字符；[1234]表示只能在[]中所给的字符中选择一个；\d{n}表示只能输入n位长度的字符。

		<input type="text" name="phone" pattern="^1[3567]\d{9}">

这里限定了第一位是1，第二位是3567中的一位数，后面要输入8位数。如果位数超过11位或者与限定数字不同，则会报错。
在这里插入图片描述
---->6）checkbox：多选框，属性类型和单选类似，<input type="checkbox" name="" value=""/>。要使多选效果生效，所有选项的name属性必须相同。可以设置默认选项。

		<input type="checkbox" name="hobby" value="code"/>编程
		<input type="checkbox" name="hobby" value="basketball"/>篮球
		<input type="checkbox" name="hobby"/ value="run">长跑

在这里插入图片描述
---->7）image：图片提交属性，src配置按键图片，width调整图片尺寸。<input type="image" src="路径/图片名" width=""/>

		<input type="image" src="img/preview.jpg" width="50px"/>

在这里插入图片描述
—>8）颜色、日期、邮箱

			颜色：<input type="color"/><br/>
			日期：<input type="datetime-local"/><br/>
			邮箱：<input type="email"/><br/>

在这里插入图片描述
—>9）select：下拉选项框，双标签。<select></select>。<option></option> 列表内容项，如果不配置value，地址栏默认传递的是正文内容；设置默认项用selected。

			<select name="省">
				<!--如果不配置value，默认传递的是正文内容；设置默认项用selected-->
				<option value="shanxi" selected>陕西</option>
				<option value="sichuan">四川</option>
				<option value="hunan">湖南</option>
			</select>

在这里插入图片描述
—>10）range：滑块元素。属性：<input type="range" min="" max="" step=""/>。min和max设置滑块数据的最小值和最大值，step设置每次调整的精度（老版IE浏览器可以在拖动时显示数据）。

		年龄：<input type="range" min="16" max="22" step="2"/>

在这里插入图片描述
—>11）三种按钮
[1]submit：点击之后，收集表单数据，提交给action配置的页面。
[2]reset：重置，回复标签默认设置。
[3]button：普通按钮，配合js去实现一些事件。如：οnclick=""。

		<input type="submit" value="提交"/>
		<input type="reset" value="重置"/>
		<input type="button" value="按钮" onclick="alert('警告！')"/>

（5）textarea：多行文本域。
建立一个多行文本框的区域，可以换行输入。文本域的宽高可以调整。

		<textarea name="" rows="" cols="" placeholder=""></textarea>

		<textarea name="intro" rows="6" cols="20" placeholder="简单介绍一下"></textarea>

在这里插入图片描述

（6）表单的高级属性
—>1）表单的隐藏域
隐藏域用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

		<input type="hidden" name="" value=""/>

—>2）readonly：只读属性<input type="text" value="admin" readonly/>。用户不能对配置了只读属性的文本框进行修改，但是可以选中。
<input type="text" name="username" value="admin" readonly/>

—>3）disabled：禁用属性<input type="text" value="admin" disabled/>。控件无法获取到焦点（即不能选中）。禁用的属性，数据不会提交给下一个页面。

—>4）表单的标注：（1）添加id，<label></label>调用id。用控件点击调用位置，将自动选择id标记的位置。如：在文本框出添加id，在文本框前方的文字“姓名”处调用id，效果为点击“姓名”，光标自动跳到后面的文本框。

		<label for="123">姓名：</label>
			<input type="text" name="username" maxlength="6" placeholder="请输入用户名" id="123" readonly value="admin"/>

单选框也可以使用标注，即点击文字–>自动选中选项。

		性别：<input name="sex" type="radio" value="man" checked id="man"/>
			<label for="man">男</label>
			<input name="sex" type="radio" value="woman"/>女

4.表单的验证（在表单信息提交时）
（1）验证过程：form–验证控件的数据–action打开的页面（处理数据）。
（2）作用在前端验证数据，可以减轻服务器的压力。
（3）途径：1）placeholder：提示语，当用户开始输入时（文本框中有值时），不再显示。value有值时不显示提示语。
在这里插入图片描述

-----------------2）required：必填项。在表单提交时，如果该项没有填写内容，则会提示填写该项。
在这里插入图片描述

-----------------3）pattern：在上面介绍过。

5.综合练习

	<form action="1.html" method="get">
			<h2>申请表</h2>
			<p>
			姓名：<input type="text" size="10">
			</p>
			
			<p>
			教育程度：<input name="1" type="checkbox" checked/>硕士
			<input name="1" type="checkbox"/>博士
			</p>
			
			<p>
			常用邮箱：<input type="text"><br/>
			</p>
			
			<p>
			性别：<input name="sex" type="radio" checked/>男
			<input name="sex" type="radio"/>女
			</p>
			
			<p>
			年龄：<input type="text"><br/>
			</p>
			
			<p>
			月薪：<input type="text"><br/>
			</p>
			
			<p>
			附注：<textarea name="intro" rows="6" cols="20" placeholder="请在这里输入附注"></textarea>
			</p>
			
			<p>
			国籍&nbsp;<select>
				<option selected>澳大利亚</option>
			</select>
			</p>
			
			<p>
			<input type="submit" value="提交"/>
			<input type="reset" value="重置"/>
			</p>
		</form>

效果图：
在这里插入图片描述

m0_38077048

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记day02--表单

前端学习笔记day02–表单1.表单定义：将客户端的数据提交给服务器，是用户和客户端的一种交互方式。2.表单属性：<form action="1.html" method="get">（1）action：提交数据到指定页面处理，即规定处理数据的路径，路径的写法是相对路径。1.html的代码<html> <head> <meta charset="UTF-8"> <title></title> </head
复制链接

扫一扫