Web---HTML---常用标签3-CSDN博客

本文链接：https://blog.csdn.net/qq_34928644/article/details/80462414

表单 <form>

表单标签是最常用的标签，用于与服务器端的交互。

<input>：输入标签

接收用户输入信息。其中的type属性指定输入标签的类型。
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。
单选框 radio 如：性别选择。
复选框 checkbox 如：兴趣选择。
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 可以为其自定义事件。
文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
图像 image 它可以替代submit按钮。

<form action="login" method="post">
              姓名:<input type="text" name="name"> <br/>
              密码:<input type="password" name="pwd"> <br/>
              性别:<input type="radio" name="sex" value="1" checked="checked">男
          <input type="radio" name="sex" value="0">女  <br/>
              兴趣:
              <input type="checkbox" name="hobby" value="music">  音乐       
              <input type="checkbox" name="hobby" value="dance">  舞蹈        
              <input type="checkbox" name="hobby" value="game">  游戏        
              <input type="checkbox" name="hobby" value="basketball">  篮球 <br/>    
        
       		  <input type="hidden" name="code" value="1234">       
             
             
              <input type="submit" value="登录">
              <input type="reset">
</form>

<select>：选择标签

<select name="lang">
     <option value="none"> --请选择语言--</option>
     <option value="java" selected="selected"> JAVA </option>
     <option value="c"> C语言 </option>
</select>

<textarea>：多行文本框

  简介:<textarea rows="10" cols="20" name="profile">不少于200字</textarea>

表单组件格式化

用表格标签<table>对表单中的组件进行格式化。

<form action="login" method="post">
	    <table>
	    	<tr>
	    	   <td colspan="2" align="center">用户登录</td>
	    	</tr>
	    	<tr>
	    	   <td>
	    	          姓名:
	    	   </td>
	    	   
	    	   <td>
	    	      <input type="text" name="name" οnblur="myFun(this);">
	    	   </td>
	    	</tr>
	    	<tr>
	    	   <td>
	    	         密码:  
	    	   </td>
	    	      
	    	   <td>
	    	      <input type="password" name="pwd"> 
	    	   </td>
	    	</tr>
	    	<tr>
	    	   <td>
	    	        性别:   
	    	   </td>
	    	      
	    	   <td>
	    	      <input type="radio" name="sex" value="1" checked="checked">男
	    	      <input type="radio" name="sex" value="0">女
	    	   </td>
	    	</tr>
	    	<tr>
	    	   <td>
	    	      兴趣:     
	    	   </td>
	    	      
	    	   <td>
	    	      <input type="checkbox" name="hobby" value="music">  音乐       
              	  <input type="checkbox" name="hobby" value="dance">  舞蹈        
                  <input type="checkbox" name="hobby" value="game">  游戏        
                  <input type="checkbox" name="hobby" value="basketball">  篮球
	    	   </td>
	    	</tr>
	    	<tr>
	    	   <td colspan="2" align="center">
	    	        <input type="submit" value="登录">    
              		<input type="reset">   
	    	   </td>
	    	</tr>
	    </table>
    </form>

表单提交的页面实现

1）先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。
2）明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。

表单提交方式(get/post)

两种方式的区别

    1) get提交将数据显示在地址栏，对于敏感信息不安全。post提交不显示在地址栏，对于敏感信息安全
    2) 地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。而post可以提交大体积数据。
    3) 对提交数据的封装方式不同。get将提交数据封装到了http消息头的第一行即请求行中。而post将提交的数据封装到请求体(请求数据)体中。

表单提交方式与乱码问题

无论是get还是post方式，对于Tomcat服务器端，默认的解码方式是ISO8859-1，因此中文会出现乱码。解决：通过用ISO8859-1进行编码，再用相应的中文码表进行解码即可。
如果是post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效即该方法只设置数据体的编码方式。因此，通常表单使用post提交，因为这样编码更方便。