Web前端 | HTML表单form

追求适度,才能走向成功;人在顶峰,迈步就是下坡;身在低谷,抬足既是登高;弦,绷得太紧会断;人,思虑过度会疯;水至清无鱼,人至真无友,山至高无树;适度,不是中庸,而是一种明智的生活态度。

导读:本篇文章讲解 Web前端 | HTML表单form,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

✅作者简介:一位材料转码农的选手,希望一起努力,一起进步!

📃个人主页:@每天都要敲代码的个人主页

🔥系列专栏:Web前端

目录

一:表单(重要)

1. form表单初步

2. 用户注册表单的实现

3. 下拉列表支持多选

4. form的其它控件

4.1 file控件

4.2 隐藏域hidden控件

4.3 readonly & disabled

4.4 input控件的maxlength属性 

二:HTML中元素的id属性

三:div和span在网页中的应用


一:表单(重要)

1. form表单初步

(1)表单有什么用?
      收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。

(2)怎么画一个表单?使用form标签画表单。

(3)一个网页当中可以有多个表单form。

(4)表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址

①action属性用来指定数据提交给哪个服务器。

②action属性和超链接中的href属性一样;都可以向服务器发送请求(request)。

(5)在表单form里面,可以使用input输入域的type属性,画各种各样的按钮:

        button 普通按钮

        reset 重置按钮

        text 文本框

        password 密码框

        checkbox 复选框

        radio 单选按钮

        submit 提交按钮,具有提交表单的能力

(6)对于按钮来说,按钮的value属性,value属性用来指定按钮上显示的文本信息

(7)表单项写了name属性的,一律会提交给服务器。不想提交,就不要写name属性

例如:提交后结果http://localhost:8080/oa/login?username=123&password=456

格式:action?name=value&name=value&name=value&name=value&name=value…
 W3C的HTTP协议规定的,必须以这种格式提交给服务器。

(8)http://192.168.111.3:8080/oa/save 这是请求路径,表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。

(9)当name没有写的时候,该项不会提交给服务器。

         当value没有写的时候,value的默认值是空字符串””,会将空字符串提交给服务器。java代码得到的是:String username = “”

总结:文本框和密码框的value不需要程序员指定,用户输入什么value就是什么!                 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单form</title>
	</head>
	<body>
<!--1.各种按钮-->		
		<form action="http://192.168.111.3:8080/oa/save">
			<!--普通按钮,并指定values属性-->
			<input type="button" value="button按钮"/> <br>
			<!--提交按钮,可以把表单当中的数据提交带走-->
			<input type="submit" value="登录"/> <br>
			<!--清除按钮-->
			<input type="reset" value="清除"/> <br>
			<!--文本框-->
			<input type="text"/> <br>
			<!--密码框-->
			<input type="password"/> <br>
			<!--复选框-->
			<input type="checkbox"/> <br>
			<!--单选按钮-->
			<input type="radio"/>		
		</form>
		
		<hr color="red">

<!--2.value属性-->		
		<!--这个按钮和普通的超链接没什么太大的区别。
		(超链接和表单都可以向服务器发送请求,只不过表单发送请求的同时可以携带数据。)-->
		<form action="http://ww.baidu.com">
			<input type="text"/>
			<input type="submit" value="百度"/>
		</form>
		
		<hr color="red">


<!--3.制作一个登录清除按钮界面-->			
		<form action="http://localhost:8080/oa/login">
			用户名:<input type="text" /> <br>
			密码:&nbsp;&nbsp;&nbsp;<input type="text" /> <br>
			<input type="submit" value="登录"> 
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="reset" value="清除"> <br>
		</form>
		<hr color="red">
		
<!--4.把这个登录清除按钮界面放到表格里-->			
		<!---也可以把上面的按钮放到表格的当中--> <br><br>
		<form action="http://localhost:8080/oa/login">
			<table border="1px">
				<tr>
					<td>用户名:</td>
					<!--5.设置name属性,才会把写的用户密码提交走-->
					<!--提交后结果:http://localhost:8080/oa/login?username=123&password=456-->
					<td><input type="text" name="username" /> </td>
				</tr>
				<tr>
					<td>密码:</td>
					<!--用户在框里里填入的内容,就是value的值-->
					<td><input type="text" name="password" /></td>
				</tr>
				<tr>
					<td><input type="submit" value="登录"> </td>
					<td><input type="reset" value="清除"> </td>
				</tr>		
			</table>
		</form>		
	</body>
</html>

Web前端 | HTML表单form

2. 用户注册表单的实现

(1)form表单method属性:
            get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。
            post:采用post方式提交的时候,用户提交的信息不会显示在浏览器地址栏上。

            当用户提交的信息中含有敏感信息,例如:密码,建议采用post方式提交!

            默认使用的是get方式提交!

(2)单选框和复选框:要求name属性相同,这样才能保证在同一组!        

(3)下拉列表:使用<select name><option value></select></option>联合使用,添加selected属性可以选择默认选项

(4)文本域:使用<textarea></textarea>根本没有value属性;可以使用rows和cols属性调文本框的大小

(5)超链接实际上也可以提交数据给服务器,但是提交的数据都是固定不变的。并且链接是get请求,不是post请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册表单的实现</title>
	</head>
	<body>                                       <!--method属性,post表示用户提交的信息不会显示在浏览器地址栏上-->
		<form action="http://localhost:8080/jd/register" method="post">
			用户名
			<input type="text" name="username" />
			<br>
			
			密码
			<input type="password" name="userpwd" />
			<br>
			
			确认密码 <!--确认密码不需要上传到服务器,用js判断-->
			<input type="password"/>
			<br>
			
			性别
			<!--name都写成sex,表示同一组,这样就能保证二者只能二选一-->
			<!--单选按钮的value必须手动指定-->
			<!--加上checked表示默认勾选的选项是男-->
			<input type="radio" name="sex" value="1" checked/>男
			<input type="radio" name="sex" value="0" />女
			<br>
			
			兴趣爱好
			<input type="checkbox" name="interest" value="music"/>听音乐
			<input type="checkbox" name="interest" value="baskeball"/>打篮球
			<input type="checkbox" name="interest" value="fishing"/>钓鱼
			<br>
			
			学历
			<!--使用selected表示默认选中-->
			<select name="grade">
				<option value ="gz">高中</option>
				<option value ="dz">大专</option>
				<option value ="bk" selected>本科</option>
				<option value ="ss">硕士</option>
			</select>
			<br>
			
			简介
			<!--文本域-->
			<!--文本域根本就没有value属性-->
			<textarea rows="10" cols="60" name="introduce"></textarea>
			<br>
			
			<!--提交和清除-->
			<input type="submit" value="注册" >
			<input type="reset" value="清除">		
	    </form>
		
		<!--超链接也可以提交数据给服务器,但是提交的数据都是固定不变的。-->
		<!--超链接是get请求。不是post请求。-->
		<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
	
	</body>
</html>

Web前端 | HTML表单form

3. 下拉列表支持多选

①使用select时,调用multiple就可以支持多选,没有属性的时候,默认只会显示一条数据;加上multiple属性就会把所有的选项都显示出来!

②框中显示的条数可以用size来控制!

注意:多选时,必须要按住ctrl键!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表支持多选</title>
	</head>
	<body>
		学历 <!--不使用multiple属性,只能选一项-->
		<select name="grade">
			<option value ="cz">初中</option>
			<option value ="gz">高中</option>
			<option value ="dz">大专</option>
			<option value ="bk">本科</option>
			<option value ="ss">硕士</option>			
		</select> 
		
		<!-- multiple="multiple" 支持多选的 size设置显示条目数量-->
		学历<!--使用multiple属性,可以选择多项,按住ctrl键选择-->
		<select name="grade" multiple="multiple">
			<option value ="cz">初中</option>
			<option value ="gz">高中</option>
			<option value ="dz">大专</option>
			<option value ="bk">本科</option>
			<option value ="ss">硕士</option>			
		</select> 
		
		
		学历<!--增加size属性,让框中显示出来两个数据-->
		<select name="grade" multiple="multiple" size="2">
			<option value ="cz">初中</option>
			<option value ="gz">高中</option>
			<option value ="dz">大专</option>
			<option value ="bk">本科</option>
			<option value ="ss">硕士</option>			
		</select> 
		
	</body>
</html>

Web前端 | HTML表单form

4. form的其它控件

4.1 file控件

file控件:文件上传专用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件</title>
	</head>
	<body>
		<!--文件上传专用-->
		<input type="file">
	</body>
</html>

 Web前端 | HTML表单form

4.2 隐藏域hidden控件

隐藏域:网页上看不到框,但是表单提交的时候数据会自动提交给服务器!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hidden控件</title>
	</head>
	<body>
		<form action="http://localhost:8080/oa/save">
			<input type="hidden" name="username" value="111" />
		    用户密码
			<input type="text" name="userpwd" />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

Web前端 | HTML表单form

Web前端 | HTML表单form

4.3 readonly & disabled

①readonly和disabled相同点:都是只读不能修改。
②但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>readonly和disabled</title>
	</head>
	<body>
	
		<form action="http://localhost:8080/oa/save">
			用户代码
			<input type="text" name="usercode" value="111" readonly /> <br>
			用户姓名
			<input type="text" name="username" value="张三" disabled />
			<!--提交-->
			<input type="submit" name="提交" />
		</form>
	</body>
</html>

 ​​​​Web前端 | HTML表单form

 Web前端 | HTML表单form

4.4 input控件的maxlength属性 

maxlength 设置文本框中可输入的字符数量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>maxlength属性</title>
	</head>
	<body>
        用户名
		<input type="text" maxlength="3">
	</body>
</html>

 Web前端 | HTML表单form

二:HTML中元素的id属性

(1)在HTML文档当中,任何元素(节点)都有id属性id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复

(2)注意:表单提交数据的时候,只和name有关系,和id无关。

(3)id有什么用?
javascript语言:可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改,那么增删改之前需要先拿到这个节点,通常我们通过id来拿节点对象。

id的存在让我们获取元素(节点)更方便。

(4)HTML文档是一棵树,树上有很多节点,每一个节点都有唯一的id
       javascript主要就是对这棵DOM(Document)树上的节点进行增删改的。

<!DOCTYPE html>
<html id="myhtml">
	<head id="myhead">
		<meta charset="utf-8">
		<title>HTML中元素的id属性</title>
	</head>
	<!--任何元素都有id属性-->
	<body id="mybody">
		<form id="myform">
			<input type="text" id="username" name="username"/>
			<input type="password" id="userpwd" name="userpwd"/>
		</form>
	</body>
</html>

三:div和span在网页中的应用

(1)div和span是什么?有什么用?
         div和span都可以称为“图层”
         图层的作用是为了保证页面可以灵活的布局。
         图层就是一个一个的盒子,div嵌套div就是盒子套盒子。
         div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。

(2)最早的网页是采用table进行布局的,但是table不灵活,太死板。现代的网页开发中div布局使用最多,几乎很少使用table进行布局了。            

(3)div和span的区别?
        div独自占用一行(默认情况下)
        span不会独自占用一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中的div和span</title>
	</head>
	<body>
		
		<div id="div1">我是一个DIV</div>
		<div id="div2">我是一个DIV</div>
		
		<span id="span1">我是一个SPAN标签</span>
		<span id="span2">我是一个SPAN标签</span>
		
		<div id="div3">
			<div>
				<div>test</div>
			</div>
		</div>
	</body>
</html>

Web前端 | HTML表单form

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/128458.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!