HTML5学习笔记--第九章 表单元素

最新推荐文章于 2021-05-03 17:17:11 发布
最新推荐文章于 2021-05-03 17:17:11 发布
阅读量294 收藏
点赞数
分类专栏： HTML5学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sumisu666/article/details/106223007
版权

第九章 表单元素

9-1 创建表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>创建表单</title>
	</head>
	<body>
		<!--form标签用于创建一个表单，会将里面的内容一起发送给服务器-->
		<!--结构类似于表格-->
		<!--表单中的其他元素都要包含在form标签中-->
		
		<!--form元素属性：-->
		   <!--1.必须，action指定表单发送的地址（服务器地址）-->
		   <!--2.method:表单数据发送至服务器的方法，常用的有两种：get/post，默认get-->
		
	    <form action="服务器地址" method="get">
	    	
	    </form>
	    
	</body>
</html>

9-2 表单提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单提交</title>
	</head>
	<body>
		<!--form标签用于创建一个表单，会将里面的内容一起发送给服务器-->
		<!--结构类似于表格-->
		<!--表单中的其他元素都要包含在form标签中-->
		
		<!--form元素属性：-->
		   <!--1.必须，action指定表单发送的地址（服务器地址）-->
		   <!--2.method:表单数据发送至服务器的方法，常用的有两种：get/post，默认get-->
		   <!--3.name：用来为当前表单定义一个独一无二的名称，控制表单与后台程序之间的关系-->
		   <!--4.novalidate:设置数据提交时不进行验证，通常不会用到-->
		   <!--5.target:设置目标窗口打开方式，通常不会用到-->
		
	    <form action="https://www.51zxw.net" method="get" name="51zxw" >
	    	<input type="text" name="uname" id="uname" value="请输入..." />
	    	<input type="submit"  value="发送" />
	    	
	    </form>
	    
	</body>
</html>

9-3 get/post区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>get/post区别</title>
	</head>
	<body>
		
           <!--get/post区别-->
           <!--get方法提交：数据会附在网址之后，提交给服务器，不安全，数据量很小，-->
           
           <!--post方法提交：数据不会附在网址之后，会将表单中的所有数据进行打包发送服务器，等待服务器读取，安全的过程，数据量不受限制，是使用最多的提交方法-->
		
	    <form action="https://www.51zxw.net" method="get" name="51zxw" >
	    	<input type="text" name="uname" id="uname" value="请输入..." />
	    	<input type="submit"  value="发送" />	    	
	    </form>
	    
	    <form action="https://www.51zxw.net" method="post" name="51zxw" >
	    	<input type="text" name="myname" id="myname" value="请输入..." />
	    	<input type="submit"  value="发送" />	
	    </form>	    
	    
	</body>
</html>

9-4 本地安装服务器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>本地安装服务器</title>
	</head>
	<body>
		<!--本地安装服务器环境：-->
		    <!--1.下载phpstudy软件，点击安装-->
		    <!--2.打开软件，启动"套件"中的前三项-->
		    <!--3.打开浏览器，地址栏输入“127.0.0.1”，回车-->
		    <!--4.看到“站点创建成功”，表示本地安装服务器环境成功-->
		    <!--5.把程序目录中的“www文件夹”发送到桌面-->
		    
	</body>
</html>

9-5 表单发送

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单发送</title>
	</head>
	<body>
		注意：
		  1.表单接收程序，必须要放在服务器环境中
		  2.表单发送地址，一定要填写完整，加上http://
		
		<form action="http://127.1.1.1/51zxw.php" method="post">
			<input type="text" name="uname" />
			<input type="submit" />
		</form>
		
	</body>
</html>

9-6 type和name属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>type和name属性</title>
	</head>
	<body>
		<!--1.input元素是最常用的表单控件-->
		<!--2.input元素不仅仅可以在form表单中使用，还可以在表单之外使用-->
		
		<!--input元素的type属性（必须要有）：-->
		   <!--1.指定输入内容的类型-->
		   <!--2.默认为text，单行文本框-->
		   
		<!--input元素的name属性（必须要有）：-->  
		   <!--1.传递参数时的参数名称-->
		   <!--2.表单接收找的就是name属性值-->
		

      		<form action="http://127.1.1.1/51zxw.php" method="post">
			   <input type="text" name="uname" />
			   <input type="submit" />
		    </form>

	</body>
</html>

9-7 value和placeholder属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>value和placeholder属性</title>
	</head>
	<body>
		<!--1.input元素是最常用的表单控件-->
		<!--2.input元素不仅仅可以在form表单中使用，还可以在表单之外使用-->
		
		<!--input元素的value属性（非必须）：-->
		   <!--1.输入框中的默认值-->
		   <!--2.value值会发送到服务器-->
		   
		<!--input元素的placeholder属性（非必须）：-->  
		   <!--1.输入框中的默认值，当文本框在获得焦点时，默认值会被清空-->
		   <!--2.placeholder中的值不会发送到服务器-->
		


      		<form action="http://127.1.1.1/51zxw.php" method="post">
			   <!--<input type="text" name="abc" value="请输入。。。"/>-->
			   <input type="text" name="abc" placeholder="请输入。。。"/>
			   <input type="submit" value="确定" />
		    </form>

	</body>
</html>

9-8 maxlength和disabled属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>maxlength和disabled属性</title>
	</head>
	<body>
		<!--1.input元素是最常用的表单控件-->
		<!--2.input元素不仅仅可以在form表单中使用，还可以在表单之外使用-->
		
		<!--input元素的maxlength属性（非必须）：-->
		   <!--1.用来控制输入的最大字数-->
		   <!--2.包括英文、数字、汉字等-->
		   
		<!--input元素的disabled属性（非必须）：-->  
		   <!--1.设置为不可用，不可操作，不能修改，不提交到服务器-->
		   <!--2.用于格式提示-->
		


      		<form action="http://127.1.1.1/51zxw.php" method="post">
			   <!--<input type="text" name="abc" placeholder="请输入电话号码" maxlength="11"/>-->
			   格式提示：<input type="text" placeholder="xx省xx市xx区xx号" disabled="disabled"/>
			   <br />
			   输入地址：<input type="text" name="abc" placeholder="请输入地址" />
			   
			   
			   <input type="submit" value="确定" />
		    </form>

	</body>
</html>

9-9 autofocus和disabled属性(仅作了解)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>autofocus和disabled属性(仅作了解)</title>
	</head>
	<body>
		<!--1.input元素是最常用的表单控件-->
		<!--2.input元素不仅仅可以在form表单中使用，还可以在表单之外使用-->
		
		<!--input元素的autofocus属性（非必须）：-->
		   <!--1.让输入框自动获得焦点。-->
		   <!--2.打开页面以后，光标自动处于编辑状态-->
		   
		<!--input元素的autocomplete属性（非必须）：-->  
		   <!--1.属性值：on/off-->
		   <!--2.定义是否开启浏览器自动记忆功能-->
		


      		<form action="http://127.1.1.1/51zxw.php" method="post">
			   <!--<input type="text" name="abc" placeholder="请输入。。。" autofocus="autofocus" />-->
               <input type="text" name="abc" placeholder="请输入。。。" autocomplete="on"/>
			   
			   
			   <input type="submit" value="确定" />
		    </form>

	</body>
</html>

9-10 单行文本框和密码输入框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单行文本框和密码输入框</title>
	</head>
	<body>

		
		<!--input元素的type属性（非必须）：-->
		
        <!--单行文本框：
            1.type="text"
            2.可以输入任何类型的文本：数字，汉字，字母
            3.输入的内容以单行显示
        -->
		   
        <!--密码输入框框：
            1.type="password"
            2.输入的字符会以小圆点或者星号显示
            3.输入的内容会被隐藏
        -->
        
      		<form action="http://127.1.1.1/51zxw.php" method="post">
			   用户名：<input type="text" name="uname"  />	
			         <br />
			       密码：<input type="password" name="password"/>
			         <input type="submit"  />
		    </form>

	</body>
</html>

9-11 提交按钮和重置按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>提交按钮和重置按钮</title>
	</head>
	<body>

		
		<!--input元素的type属性（非必须）：-->
		
        <!--提交按钮：
            1.type="submit"
            2.点击后将数据发送到服务器
            3.可以用value来改变按钮的名称
        -->
		   
        <!--重置按钮：
            1.type="reset"
            2.点击后将清空输入框中的内容
            3.可以用value来改变按钮的名称
        -->
        
      		<form action="http://127.1.1.1/51zxw.php" method="post">
			   用户名：<input type="text" name="uname"  />	
			          <br />
			         密码：<input type="password" name="password"/>
			          <input type="submit"  value="发送"/>
			          <input type="reset" value="重写"/>
		    </form>

	</body>
</html>

9-12 普通按钮和隐藏域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>普通按钮和隐藏域</title>
	</head>
	<body>

		
		<!--input元素的type属性（非必须）：-->
		
        <!--普通按钮：
            1.type="button"
            2.定义的是一个可以点击的按钮，但是没有任何行为，也没有任何样式
            3.可以用value来改变按钮的名称
            4.常用于点击按钮时来启动js程序
        -->
		   
        <!--隐藏域：
            1.type="hidden"
            2.隐藏域不会显示在页面中，一般是网页设计者设置好的数据
            3.表单提交的时候隐藏域中的value会提交到服务器
        -->
        
      		<form action="http://127.1.1.1/51zxw.php" method="post">
			   用户名:<input type="text" name="uname"  />	
			          <br />
			      密码:<input type="password" name="password"/>
			         <br />
			        <input type="hidden" name="xjd" value="小家电"/>
			         <br />			         
			         
			         
			          <input type="submit"  />
			          <input type="reset" />
			          <input type="button"  value="普通按钮"/>
			          
		    </form>

	</body>
</html>

9-13 数字输入框和活动条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数字输入框和活动条</title>
	</head>
	<body>

		
		<!--input元素的type属性（非必须）：-->
		
        <!--数字输入框：
            1.type="number" 
            2.专门用来输入数字，其他类型不能输入
            3.min:允许输入的最小值
            4.max:允许输入的最大值
            5.step:步长
        -->
		   
        <!--活动条：
            1.type="range"
            2.专门用来输入数字，其他类型不能输入
            3.min:允许输入的最小值
            4.max:允许输入的最大值
            5.step:步长
        -->
        
      		<form action="https://www.51zxw.net" method="get">
      			<input type="number" name="abc" value="10" min="5" max="20" step="5"/>
			    <br />			         
			    <input type="range" name="bcd" value="10" min="10" max="80" step="5"/>     
			         
			    <input type="submit"  />

			          
		    </form>

	</body>
</html>

9-14 时间输入框和颜色选择器和文件域（了解就行）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时间输入框和颜色选择器和文件域（了解就行）</title>
	</head>
	<body>

		
		<!--input元素的type属性（必须要有）：-->
		
        <!--时间输入框：
            1.type="time/datetime/datetime-local/date/month/week" 
            
        -->
		   
        <!--颜色选择器：
            1.type="color"
            2.专门用来选择颜色的
        -->

        <!--文件域：
            1.type="file"
            2.用于文件上传
            3.accept：规定选取文件的类型
            4.multiple：规定一次允许选择多个文件
        -->
        
        
      		<form action="https://www.51zxw.net" method="get">
      			<input type="datetime-local" name="abc" />
			    <br />			         
 
                <input type="color" name="bcd"/>
                <br  />
                
                <input type="file" name="" accept="image/jpeg" multiple="multiple"/>
                
			    <input type="submit"  />
			    
			    
			    
			    

			          
		    </form>

	</body>
</html>

9-15 单选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单选框</title>
	</head>
	<body>

		
		<!--input元素的type属性（必须要有）：-->

        <!--单选框：
            1.type="radio"
            2.name属性值必须设置成相同的属性值
            3.向服务器发送的值是value值
            4.可以通过checked设置默认选取状态，再次单击取消选取
        -->
        
        
      		<form action="https://www.51zxw.net" method="get">
      			性别：<input type="text" name="uname" />
			    <br />			         
                
                <input type="radio" name="sex" value="男" checked="checked"/> 男
                <input type="radio" name="sex" value="女"/> 女
                <input type="radio" name="sex" value="人妖"/> 人妖
                
			    <input type="submit"  />
			    
			    
			    
			    

			          
		    </form>

	</body>
</html>

9-16 复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复选框</title>
	</head>
	<body>

		
		<!--input元素的type属性（必须要有）：-->

        <!--单选框：
            1.type="checkbox"
            2.name属性值必须设置成相同的属性值,在属性值后加上中括号成为数组（很关键）
            3.向服务器发送的值是value值
            4.可以通过checked设置默认选取状态，再次单击取消选取
        -->
        
        
      		<form action="http://127.0.0.1/51zxw2.php" method="post">
      			喜欢的水果：<input type="text" name="uname" />
			    <br />			         
                
                <input type="checkbox" name="fruit[]" value="苹果" checked="checked"/> 苹果
                <input type="checkbox" name="fruit[]" value="香蕉"/> 香蕉
                <input type="checkbox" name="fruit[]" value="西瓜"/> 西瓜
                
			    <input type="submit"  />
			    
			    
			    
			    

			          
		    </form>

	</body>
</html>

9-17 电子邮箱

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>电子邮箱</title>
	</head>
	<body>

		
		<!--input元素的type属性（必须要有）：-->

        <!--电子邮箱输入框：
            1.type="email"
            2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框
        -->
        
        <!--网址输入框：
            1.type="url"
            2.会对输入的内容进行验证，符合可以发送，不符合弹出提示框
            3.输入的网址一定要包含协议 http://或者https://
        -->        
        
        
        
      		<form action="https://www.51zxw.net" method="post">
      			
      			单行输入：<input type="text" name="abc"/>
      			<br />			
      			电子邮箱：<input type="email" name="email" />
			    <br />			         
                                网址：<input type="url" name="url" />
                 
			    <input type="submit"  />
        
		    </form>

	</body>
</html>

9-18 表单验证属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证属性</title>
	</head>
	<body>

		
		<!--input元素的type属性（必须要有）：-->

        <!--pattern属性：
            1.规定字符输入的模式
            2.模式指的是：正则表达式
            3.会对输入的内容进行验证，符合可以发送，不符合弹出提示框
        -->
        
        <!--required属性：
            1.必须在提交前填写输入字段，不填写不能提交
        -->        
        
        
        
      		<form action="https://www.51zxw.net" method="get">
      			
      			单行输入：<input type="text" name="abc" pattern="[0-9]{11}" />
      			<br />	
      			
      			单行输入2：<input type="text" name="abc" placeholder="必须填写" required="required"/>
      			<br />		
      			
			    <input type="submit"  />
			    
        
		    </form>

	</body>
</html>

9-19 多行文本输入框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多行文本输入框</title>
	</head>
	
	<body>
		<!--多行文本输入框：
		   1.textarea标签
		   2.文本输入区域可以容纳无限数量的文本
		   3.多行文本输入框和单行文本输入框的属性差不多
		   4.不要使用rows和cols设置多行文本输入框的行数和列数，不太精准;应使用css设置宽高
		   5.可以在表单（form）之外使用
		-->
		
		
		
		单行文本输入框：<input type="text" />
		
		多行文本输入框：<textarea name="" style="width: 200px;height: 150px;"> </textarea>
	</body>
</html>

9-20 下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表</title>
	</head>
	<body>
       <!--		
		  select:
		     1.表示创建下拉列表
		     2.可以通过size属性设置列表中显示多少个项
		  
		  option：
		     1.表示每一个下拉列表项
		     2.往服务器中发送的是value值
	  -->
		<form action="https://www.51zxw.net" method="get">
			
			<select name="abc" size="3">
				<option value="a">辽宁</option>
				<option value="b">吉林</option>
				<option value="c">黑龙江</option>
				<option value="d">长沙</option>
				<option value="e">常德</option>
				<option value="f">岳阳</option>
			</select>
		
			<input type="submit" value="提交"/>
		</form>
		

	</body>
</html>

9-21 下拉列表分组多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉列表分组多选</title>
	</head>
	<body>
       <!--		
		  select:
		     1.表示创建下拉列表
		     2.可以通过size属性设置列表中显示多少个项
		     3.multiple属性可以定义多选
		     4.多选时，name属性值后应加上中括号"[]"
		  
		  option：
		     1.表示每一个下拉列表项
		     2.往服务器中发送的是value值
		     
		  optgroup：
		     1.用来对option进行分组
		     2.使用label属性设置分组名称
	  -->
		<form action="http://127.0.0.1/51zxw3.php" method="post">
			到过的省市：<br />
			<select name="abc[]" size="3" multiple="multiple">
				<optgroup label="东北">
					<option value="a">辽宁</option>
					<option value="b">吉林</option>
					<option value="c">黑龙江</option>
				</optgroup>
				
				<optgroup label="湖南">
					<option value="d">长沙</option>
					<option value="e">常德</option>
					<option value="f">岳阳</option>
				</optgroup>
			</select>
		
			<input type="submit" value="提交"/>
		</form>

	</body>
</html>

9-22 button按钮(标签)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>button按钮(标签)</title>
	</head>
	<body>
		button按钮：
		  1.type属性：可以设置三个值，submit/reset/button,含义和input按钮一样
		  2.name/value/disabled属性，与input的用法一样
		  3.button标签是双标签，进行更加复杂的样式设计
		  4.注意：如果是在表单中请使用input按钮，表单外使用button
		
		
		<form action="https://www.51zxw.net" method="get">
			<input type="text" name="abc"/>
			<input type="submit" value="提交"/>
			<input type="reset" value="重置" />
			<input type="button" value="普通"/>
			
			<br />
			<br />
			<button type="submit">提交（button）</button>
			<button type="reset">重置（button）</button>
			<button type="button">普通（button）</button>
		</form>
		
		
	</body>
</html>

9-23 表单实战

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单实战1</title>
	</head>
	<body>
		
		<form action="" method="post">
                        姓名*：<input type="text" name="user" required/> <br /><br />
                        密码*：<input type="password" name="pwd" required/> <br /><br />
                        性别*：<input type="radio" name="sex" value="0" required/>男
			      <input type="radio" name="sex" value="1" required/>女
			     <br /><br />
			年龄*：<input type="number" name="age" min="0" max="120" required/> <br /><br />
			课程*：<input type="checkbox" name="kc[]" value="k1"/>课程1
			      <input type="checkbox" name="kc[]" value="k2"/>课程2
			      <input type="checkbox" name="kc[]" value="k3"/>课程3			      
			      <br /><br />  
			      
			 手机*：<input type="text" name="tel" pattern="[0-9]{11}" required/><br /><br />
			 城市*：<select name="city1" required>
			 	     <option value="bj">北京</option>
			 	     <option value="sh">上海</option>			 	   			 	
			      </select>
			      
			      <select name="city2" required>
			 	     <option value="xx">xx区</option>
			 	     <option value="yy">yy区</option>			 	   			 	
			      </select>
			  <br /><br />
			  
			  住址：<input type="text" name="addr" /> <br /><br />
			 备注：<textarea name="bz" style="width: 200px;height: 100px;">输入....</textarea>
			  
			  <br /><br />
			<input type="submit" />
			<input type="reset" />
		</form>
		

	</body>
</html>
苏米素
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML第九次课堂笔记
m0_59248606的博客
03-10 175
一.定位（position） position的值： 1.static，默认值，即使用基于“文档流”的定位 2.relative，相对定位，即在“文档流”的基础上，结合left和top属性，相对定位 3.absolute，绝对定位，即脱离“文档流”，并基于它的“包含框”，使用left和top属性来定位 4.fixed，固定定位，即特殊的绝对定位，即它的“包含框”为浏览器 相对定位： position：relative（相对与原来的位置，使用left,right进行偏移原来的位置对于后继元素的定
HTML学习笔记9：总结一
孔孟老儿
07-11 153
1、 客户端和服务器端 a) 浏览者使用的计算机，用来服务器发送请求 b) 服务器端：存放网页文件的计算机 2、 文件名、基本名、扩展名 a) 文件名由基本名和扩展名组成 b) 基本名就是文件的名称 c) 扩展名文件类型 txt doc docx ppt jpg gif png 3、 打开一个网页的执行过程 a) 可以端向服务器发送一个请求(htt...
HTML笔记——表单元素
weixin_43888905的博客
04-11 178
表单元素 一系列用于收集用户数据的元素。 input元素 输入框，包括但不仅限于文本。 type属性：输入框类型 <!--普通文本输入框--> <!--Emmet: input:text--> <input type="text"> <!--密码输入框--> <input type="password"> <!--日期选择框--> <!--和浏览器兼容性有关，样式不可更改--> <input type=
Web前端技术开发学习笔记(HTML标记语言篇)——第9章 在网页中创建超链接
chanciecarney的博客
05-03 1255
第9章 在网页中创建超链接9.1 创建超链接9.1.1 超链接标记9.1.2 设置超链接窗口9.2 超链接的链接路径9.3 超链接的类型9.3.1 内部链接9.3.2 外部链接9.3.3 书签链接1.创建书签2.创建书签链接9.3.4 脚本链接9.3.5 文件下载9.3.6 文本链接9.3.7 图片链接9.3.8 图像映射 9.1 创建超链接 创建超链接使用的标记是< a>。超链接要能进行正确的链接跳转，需要同时存在两个端点。即源端点和目标端点。 源端点是指网页中提供链接单击的对象，如链接文本或
自学html-9
qq_41398448的博客
07-31 197
css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。  CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和...
bootstrap学习笔记-html5
12-22
5. **表单控件**：HTML5对表单元素进行了增强，例如新增了date、time、email、url等输入类型，以及placeholder属性和required属性，提高了表单的可用性和验证性。 Bootstrap是基于HTML5和CSS3的开源框架，它简化了...
斑码教育大前端课堂笔记-html第四天
10-11
10. **表单元素**：HTML5中的、、、、等用于创建用户交互的表单，掌握各种输入类型（text、email、password等）和表单验证规则。 11. **CSS3初步**：虽然主要在第五天讲授，但笔记中可能已经提及了CSS3的一些基础，...
HTML5入门课堂随堂笔记.zip
01-23
- HTML5新增了许多表单元素，如`<input type="date">`, `<input type="email">`, `<input type="range">`等，增强了用户输入体验。 - `required`属性可以设置必填字段，`pattern`属性允许自定义输入格式验证。 4....
Essential Guide to HTML5学习笔记
08-08
3. 表单元素：例如、、和，提供更好的用户输入体验。 三、多媒体支持 HTML5引入了和元素，使得在网页中内嵌音频和视频变得更加简单。不再需要Flash等第三方插件，开发者可以直接控制播放、暂停、音量等功能。 四、...
《HTML5与CSS3基础教程》第九章学习笔记 定义选择器
Cap220590的博客
02-24 326
文章目录第9章第9章 定义选择器9.1 构造选择器9.2 按名称选择元素9.3 按类或ID选择元素9.4 按上下文选择元素9.5 选择第一个或最后一个子元素9.6 选择元素的第一个字母或者第一行9.7 按状态选择链接元素9.8 按属性选择元素9.1 构造选择器9.2 按名称选择元素9.3 按类或ID选择元素9.4 按上下文选择元素9.5 选择第一个或最后一个子元素9.6 选择元素的第一个字母或者第...
HTML常用表单元素---笔记
qq_44864468的博客
02-25 139
1、 <input type="text" id="" value="" /> <!--文本框--> 2、 <input type="password" id="" value="" /> <!--密码框--> 3、 <input type="button" id="" value="单击我" onclick...
HTML表单元素
穆雄雄的博客
10-10 492
表单 一、表单的语法： 1.提交方式： get:不安全，地址栏里面有提交内容 post:相对安全，地址栏里面不显示提交的内容 2.提交按钮：submit 3.重置按钮：reset 4.input中常用的属性： 1)type：表示表单元素的类型，常见的值，text,password,checkbox,radio,submit,reset,file,email,number,url,h...
HTML第九天学习笔记
Fling1210的博客
11-23 84
今天就继续看了下浮点float属性,代码如下： 1 <html> 2 <head> 3 <title>CSS float属性</title> 4 <meta http-equiv = "content-type" content = "text/html; charset =...
JavaScript学习(7)利用表单获取数据
亚里士朱德的专栏
09-04 2466
1.HTML表单基础元素常用属性：  method          该属性可以是GET也可以是POST，这是向服务器传送数据的两种方式  action             是CGI脚本，表单数据在提交时被发送。也可以使用mailto：action把表单结果发给一个电子邮件地址  enctype          该属性表示向服务器发送数据时，数据使用的编码方式  accept            表示当文件上传时，列表服务器能正确处理的mime类型  select             定义组合框
input标签的value属性详解
热门推荐
WinstonLau的博客
03-13 5万+
value 属性的用法是由 input 标签的 type 属性的值决定的 当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本 当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值 当 type 的取值为 checkbox、radio、...
html5之table嵌入form表单布局（务必注意：table标签必须在form表单内部，不能再form表单外部！）
weixin_43343144的博客
03-27 1万+
切记：用table标签来布局form表单元素，table标签必须放在form表单内部，否则可能会出现各种bug <form action=""> <table > <tr> <td>姓名</td> <td><label for="">na...
HTML5第九章
qq_43142032的博客
02-13 1291
第九章 1.CSS3变形 CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化 浏览器对变形属性的支持情况，并根据不同浏览器添加前缀 变形函数 translate()：平移函数，基于X、Y坐标重新定位元素的位置 语法：translate(tx,ty); scale()：缩放函数，可以使任意元素...
HTML+CSS第九章总结
sc13647346287的博客
02-13 642
制作网页动画 translate()：平移函数，基于X、Y坐标重新定位元素的位置 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { ...
javascript学习笔记--查看html元素和改变html的内容
最新发布
06-01
好的，我可以为您解答关于 JavaScript 学习笔记方面的问题。针对您的问题，查看 HTML 元素和改变 HTML 内容是 JavaScript 中非常常见的操作之一，我们可以通过以下几种方式实现： 1. 通过 `document.getElementById...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值