html 表单和表单域标签input、textarea、select

男娘i 2021-07-24 15:23 482阅读 0赞

form表单标签学习：
    		收集并提交form标签内form表单域中value数据，按照method提交方式给
    		action指定的提交地址
    			属性：
    				action
    					收集的数据所提交的地址
    					action="#"  数据会自己提交自己
    				method
    					提交方式:提交表单数据，不管是哪种方式都需要name属性
    						get:适合小量数据，表单数据以？隔开拼接在url后面，不同的键值对使用&隔开
    							<form action="#" method="get">
    							</form>
    						post：适合大量数据,url不显示，安全
    							<form action="#" method="post" > 
    							</form>
    
    		
    form表单域标签:
    	给用户提供可以进行数据书写或者选择的标签
    		(1)input标签(行内标签)
    			输入框
    			<input/>
    				属性
    					type
    						type="text" ,text收集少量的文本数据，用户可见
    							<input type="text" />
    						type="password",用户不可见
    							<input type="password" />
    						type="submit" 提交框
    							<input type="submit"/>
    					    type="file",浏览电脑文件功能
    						  
    					value
    						type="submit"的提交框名称
    							<input type="submit" value="登录" />
    					name
    						数据提交的键,键值等于name的数据
    						要提交的表单域数据必须提供name键值，提交框内数据给后台使用
    							<input type="text" name="uname" />
    					disabled="disabled"
    						无法点击,也不会提交	
    					readonly="readonly"
    						只读
    				   alt
    				   	 alt="xxx";      浏览器不可见，用户源码后台可见内容
    			
    		(3)单选框:
    			如果name的值是一样的，则只能点击一个
    			type="radio"
    				<input type="radion" name="sex" value="1"/> <input type="radio" name="sex" value="0/> 
    			value
    				选择的数据显示名称
    			checked
    				使用此属性默认为已被选择状态
    				checked="checked"
    	
    		(4)多选框:
    			type="checkbox"
    				赚钱<input type="checkbox" name="爱好" value="赚钱"/><br>
    				养家<input type="checkbox" name="爱好" value="养家"/><br>
    				找女朋友<input type="checkbox" name="爱好"/ value="找女朋友"> <br/>
    			name
    				因为是多选，所以name值一样，value不一样，一对多	
    			value
    			checked
    				默认已选
    					养家<input type="checkbox" checked="checked"name="爱好" value="养家"/><br>
    		
    		(5)单选下拉框select:
    			下拉标签：
    				<select>
    					
    				</select>
    				
    			属性
    				name 因为下拉框只能选一个，所以设定的name键值在select标签中更合适，而非option标签
    					
    				下拉框选项子标签option:
    					<option value="提取内容">选项内容</option>
    					
    						<select name="键值" >
    							<option value="请选择" disabled>请选择</option>	disabled将会禁止选中此选项
    							<option value="中国">中国</option>
    							<option value="美国">美国</option>
    							<option value="英国">英国</option>
    							<option value="布吉岛国">布吉岛国</option>
    						</select><br />
    						属性
    						value 提取的值
    						
    						selected
    							被默认为下拉框第一个选项
    								<option value="美国" selected="selected">美国</option>
    								
    					 	disabled
    					 		disabled将会禁止选中此选项,移动端会自行滑过
    					 		
    		(6)textarea文本域(行内标签):
    			大框文本输入区域,用户输入，所以无value
    				<textarea>
    					
    				</textarea>
    					属性
    						name 数据提交的键名
    						rows 声明文本域的行数
    						cols 声明文本域的列数
    							<textarea name="in" rows="10" cols="30">
    				
    							</textarea><br />
    		(7)普通按钮:
    			无效果，提交不显示,一般只给按钮命名，value
    				type="button"
    				name
    				id
    				value
    					给按钮框命名
    						<input type="button" name="" id="" value="普通按钮" /><br />
    			
    		(8)隐藏按钮:
    			给name和value赋值后可以隐藏提交数据
    				type="hidden"
    				name
    				id
    				value

**代码示例**

<html>
    	<head>
    		<title>form标签学习</title>
    		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    	</head>
    	<body>
    		<h3 align="center">form标签学习</h3>
    		<hr size="30" color="aquamarine"/>
    		
    		<form action="#" method="get">
    			
    			用户名:<input type="text" name="uname" /> <br />
    			密码：<input type="password" name="upwd"/> <br />
    			邮箱：<input type="password" name="uemail/"><br />
    			性别：男<input type="radio" name="sex" value="1"/> 女<input type="radio" name="sex" value="0" /><br />
    			上门服务：是<input type="radio" checked="checked" name="service" value="1"/> 否<input type="radio" name="service" value="0"><br />
    			爱好:<br/> 
    			赚钱<input type="checkbox" name="爱好" value="赚钱"/><br>
    			养家<input type="checkbox" checked="checked"name="爱好" value="养家"/><br>
    			找女朋友<input type="checkbox" name="爱好" value="找女朋友" /> <br/>
    			国家：<br />
    				<select name="国家">
    				<option value="0">---请选择---</option>
    				<option value="中国">中国</option>
    				<option value="美国" selected="selected">美国</option>
    				<option value="英国">英国</option>
    				<option value="布吉岛国">布吉岛国</option>
    					
    				</select><br />
    			文本域：<br />
    				<textarea name="in" rows="10" cols="30">
    					
    				</textarea><br />
    			
    			普通按钮:<input type="button" name="" id="" value="普通按钮" /><br />
    			隐藏按钮：<input type="hidden" name="hidden" id="" value="haha" /><br />
    			
    			<input type="submit" value="登录" />
    			
    			
    		</form>
    	</body>
    </html>