表单2
  TEZNKK3IfmPf 2023年11月13日 38 0

2. hidden控件  21

代码在  015 hidden控件

<!-- hidden控件  21 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hidden控件</title>
	</head>
	<body>
		<form action="http://localhost:8080/oa/save">
			<!--隐藏域:网页上看不到,但是表单提交的时候数据会自动提交给服务器。-->
			<input type="hidden" name="userId" value="111"/>
			
			用户代码<input type="text" name="usecode"/>
			
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

3. readonly和disabled  23

readonly和disabled相同点:都是只读不能修改。

但是readonly可以提交给服务器,disabled数据不会提交即使有name属性也不会提交。

代码在  015 readonly和disabled

<!-- readonly和disabled  23 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>readonly和disabled</title>
	</head>
	<body>
		<!--
			readonly和disabled相同点:都是只读不能修改。
			但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交。)
		-->
		<form>
			用户代码<input type="text" name="usercode" value="111" readonly/>
			<br>
			用户姓名<input type="text" name="username" value="张三" disabled/>
			<br>
			<input type="submit" value="提交">
		</form>
	</body>
</html>

4. input控件的maxlength属性  24

代码在  016input控件的maxlength属性  

<!-- input控件的maxlength属性  24 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input控件的maxlength属性</title>
	</head>
	<body>
		<input type="text" maxlength="3">  <!-- 解释maxlength可以控制文本输入的字数 -->
	</body>
</html>

5. html中元素的id属性  25

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

注意id就像身份证号不能重复

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

5.1 id有什么用?

javascript语言:可以对HTML文档当中的任意节点进行增删改操作。

javascript可以对HTML文档当中的任意节点进行增删改,那么增删改之前需要先拿到这个节点,通常我们通过id来拿节点对象。id的存在让我们获取元素(节点)更方便。

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

DOM(Document)树。概图如下

表单2

代码在 017html中元素的id属性

<!-- html中元素的id属性   25 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html中元素的id属性</title>
	</head>
	<body id="mybody">
		<!--
			1、在HTML文档当中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
			2、注意:表单提交数据的时候,只和name有关系,和id无关。
			3、id有什么用?
				javascript语言:可以对HTML文档当中的任意节点进行增删改操作。
				javascript可以对HTML文档当中的任意节点进行增删改,那么增删改之前需要先拿到这个节点,通常我们通过id来拿节点对象。
				id的存在让我们获取元素(节点)更方便。
			4、HTML文档是一棵树,树上有很多节点,每一个节点都有唯一的id。
				javascript主要就是对这棵DOM树上的节点进行增删改的。
				DOM(Document)树。
		-->
		<form id="myform">
			<!-- 注意id就像身份证号不能重复 -->
			<input type="text" id="username" name="username"/>
			<input type="password" id="userpwd" name="userpwd"/>
			
		</form>
	</body>
</html>

6. div和span  26

6.1 div和span是什么?有什么用?  

* div和span都可以称为“图层”

* 图层的作用是为了保证页面可以灵活的布局。

* 图层就是一个一个的盒子,div嵌套div就是盒子套盒子。

* div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。

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

 

6.2 div和span的区别? 26

div独自占用一行(默认情况下)

span不会独自占用一行。

代码在  018html中的div和span

<!-- html中的div和span   26 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html中的div和span</title>
	</head>
	<body>
		<!--
			1、div和span是什么?有什么用?
				* div和span都可以称为“图层”
				* 图层的作用是为了保证页面可以灵活的布局。
				* 图层就是一个一个的盒子,div嵌套div就是盒子套盒子。
				* div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。
			2、其实最早的网页是采用table进行布局的,但是table不灵活,太死板。
			现代的网页开发中div布局使用最多,几乎很少使用table进行布局了。
			
			3、div和span的区别?
				div独自占用一行(默认情况下)
				span不会独自占用一行。
		-->
		<div id="div1">我是一个div</div>
		<div id="div2">我是一个div</div>
		<span id="span1">我是一个span标签</span>
		<span id="span2">我是一个span标签</span>
		
		<!-- div嵌套 -->
		<div id="div3">
			<div>
				<div>test</div>
			</div>
		</div>
	
	</body>
</html>
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月13日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年03月30日   50   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年04月26日   36   0   0 htmlScala
  TEZNKK3IfmPf   2024年03月29日   51   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月29日   92   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月29日   54   0   0 htmlhtml5
  TEZNKK3IfmPf   2024年03月29日   53   0   0 htmljQuery
  TEZNKK3IfmPf   2024年05月31日   31   0   0 表单
TEZNKK3IfmPf