• 中文
    • English
  • 注册
  • 查看作者
    • 9:CSS表单

      一.  表单简介

      表单主要用来收集用户的数据,比如我们做的网上在线调查,或者谷歌的搜索框,都是表单的应用场所。

      二.  input

      input是我们使用最多的表单元素,可以根据不同的type属性呈现出不同的状态,type属性可选值:

      • text:文本框

      • password:密码框

      • checkbox:多选框

      • radio:单选框

      • submit:提交按钮

      • reset:重置按钮

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style type="text/css">
      
      
      		</style>	
      	</head>
      	<body>
      
      		<!--action表示表单提交的地址,method表示表单的提交方式-->
      		<!--action为空,就是提交到当前页面,数据都会显示在地址栏-->
      		<form action="" method="get">
      		
      			<!--文本框-->
      			用户名:<input type="text" name="username"/> 
      			<!--因为input是行级元素,可以用br换行-->
      			<br />
      			<!--密码框-->
      			密  码:<input type="password" name="password" />
      			<br />
      			
      			<!--多选框-->
      			<!--name是参数名,相同的name可以视为一组,value是参数的值,如果不写value,地址栏显示on-->
      			<input type="checkbox" name="likes"  value="zq"/> 足球
      			<input type="checkbox" name="likes"  value="lq"/> 蓝球
      			<input type="checkbox" name="likes"  value="ppq"/> 乒乓球
      			
      		    <br />
      			<!--单选框-->
      			<!--如果不写value,则浏览器会默认为这是三个独立的单选框,都可以选择-->
      			<input type="radio" name="gender"  value="nan"/> 男
      			<input type="radio" name="gender"  value="nv"/> 女
      			<input type="radio" name="gender"  value="bm"/> 保密
      			<br />	
      
      			
      			<!--下拉列表-->	
      			城市:
      			<select name="city">
      				<!--optgroup用于为列表项分组-->	
      				<optgroup label="一线城市">
      					<option value="bj"> 北京 </option>
      					<option value="gz"> 广州 </option>
      					<option value="sh"> 上海 </option>
      				</optgroup>
      				<optgroup label="二线城市">		
      					<option value="jn"> 济南 </option>
      					<option value="jj"> 济宁 </option>
      					<option value="rz"> 日照 </option>
      				</optgroup>				
      			</select>
      			
      			<!--重置-->
      			<input type="reset" value="重置" />
      			
      			<!--注册-->
      			<input type="submit" value="注册" />
      		</form>
      	</body>
      </html>

      9:CSS表单

      简单模拟百度的搜索框:

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style type="text/css">
      		
      
      		</style>	
      	</head>
      	<body>
      		<form action="https://baidu.com/s" method="get">
      			<input type="text" name="wd"/>
      			
      			<input type="submit" value="百度一下"/>
      		</form>
      	</body>
      </html>

      三.  文本域

      textarea用来创建一个文本域,实际效果和文本框类似,只是可以输入多行数据。可用属性:

      • cols:文本域的列数

      • rows:文本域的行数

      <!--文本域,一般不用cols和rows来控制文本域大小,而用css-->
      <!--textarea是行级标签-->			
      备注:<br />
      
      <textarea name="beiwang" cols="60" rows="10">
      	
      </textarea>

      四.  表单提交方式

      上面已经说过,action是表单的内容要提交到哪里,而method的就是表单的提交方式,有post和get两种方式,这两者最根本的区别是请求参数是否会显示在地址栏,get会将请求参数显示在地址栏,而post将请求参数包装在request header 的form data中。(可以通过F12——>network ——>Headers ——>Form Data来查看)。注意,input标签需要添加name属性,地址栏才会有请求参数

      不建议使用get传递安全性较高的数据,如果是添加或修改的操作,建议使用post方式,因为post方式可以传递较多的数据。比如文件上传表单,使用的就是post方式

      另外值得注意的时,post传参如果包含中文,那么获取的时候会显示乱码,解决方法也很简单,在获取参数之前,添加以下小脚本即可:

      <%request.setCharacterEncoding("utf-8");%>

      五 .  其他

      • fieldset用来为表单元素分组

      • legend用于指定每组的名字

      • label标签用来为表单元素定义描述文字

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style type="text/css">
      
      
      		</style>	
      	</head>
      	<body>
      
      		<!--action表示表单提交的地址,method表示表单的提交方式-->
      		<!--action为空,就是提交到当前页面,数据都会显示在地址栏-->
      		<form action="" method="get">
      			<fieldset>
      				<legend> 第一组 </legend>
      				<!--文本框-->
      				<label for="un"> 	用户名:</label>  <!--方式一,用id选择-->
      				<input id = "un" type="text" name="username"/> 
      				<!--因为input是行级元素,可以用br换行-->
      				<br />
      				<!--密码框-->
      				<label>
      				密  码:<input type="password" name="password" />
      				</label><!--方式二,直接包在label标签里,现在点击用户名和密码,也会触发焦点进入输入框中-->
      				<br />
      			</fieldset>
      			<fieldset>
      				<legend> 第二组 </legend>			
      				<!--多选框-->
      				<!--name是参数名,相同的name可以视为一组,value是参数的值,如果不写value,地址栏显示on-->
      				<label>
      
      					<input type="checkbox" name="likes"  value="zq"/> 足球
      				
      				</label>
      				<label>
      					<input type="checkbox" name="likes"  value="lq"/> 蓝球
      				</label>
      				<label>
      					<input type="checkbox" name="likes"  value="ppq"/> 乒乓球
      				</label><!--现在点击乒乓球这几个字,也可以勾选上该多选框-->
      				
      				<br />
      				<!--单选框-->
      				<!--如果不写value,则浏览器会默认为这是三个独立的单选框,都可以选择-->
      				<label>	
      					<input type="radio" name="gender"  value="nan"/> 男
      				</label>
      				<label>				
      					<input type="radio" name="gender"  value="nv"/> 女				
      				</label>	
      				<label>					
      					<input type="radio" name="gender"  value="bm"/> 保密
      				</label>		
      				<br />	
      
      				
      				<!--下拉列表-->	
      				城市:
      				<select name="city">
      					<!--optgroup用于为列表项分组-->	
      					<optgroup label="一线城市">
      						<option value="bj"> 北京 </option>
      						<option value="gz"> 广州 </option>
      						<option value="sh"> 上海 </option>
      					</optgroup>
      					<optgroup label="二线城市">		
      						<option value="jn"> 济南 </option>
      						<option value="jj"> 济宁 </option>
      						<option value="rz"> 日照 </option>
      					</optgroup>				
      				</select>
      				<br />
      			
      			</fieldset>
      			
      			<fieldset>
      				<legend> 第三组 </legend>
      			<!--文本域,一般不用cols和rows来控制文本域大小,而用css-->
      			<!--textarea是行级标签-->			
      			备注:<br />
      			
      			<textarea name="beiwang" cols="60" rows="10">
      				
      			</textarea>
      			<br />
      			<!--重置-->
      			<input type="reset" value="重置" />
      			
      			<!--注册-->
      			<input type="submit" value="注册" />
      			</fieldset>
      		</form>
      	</body>
      </html>
      山东省·济南市
    • 0
    • 0
    • 0
    • 1.5k
    • 十二

      请登录之后再进行评论

      登录

      赞助本站

      • 支付宝
      • 微信
      • QQ

      感谢一直支持本站的所有人!

      单栏布局 侧栏位置: