HTML语言标签之表单

最新推荐文章于 2023-06-21 14:02:33 发布

一斤草莓吃光光

最新推荐文章于 2023-06-21 14:02:33 发布

阅读量451

点赞数

分类专栏： HTML与CSS 文章标签： html 标签表单

本文链接：https://blog.csdn.net/sinat_36713319/article/details/53607624

版权

HTML与CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

表单标签<form></form>是很常用的标签，用于与服务器端的交互。
一、输入标签 <input>：用于接收用户的输入信息

<html>
  <head>
    <title>input.html</title>
    <meta http-equiv="content-type" content="text/html; charset=GB18030">
  </head> 
  <body>
  <!-- 定义表单的范围 -->
<form> 
<!-- 输入组件 -->
<!-- 表单组件都需要定义name和value属性，是为了让服务器端获取客户端提交的数据，对于文本框和密码框，文本区域可以不指定value属性，因为输入的内容就是value的值 -->
用户名：<input type="text" name="user" value="请输入姓名"/><br/>
用户密码：<input type="password" name="psw"/><br/>

性别：<input type="radio" name="sex" value="male"/>男<input type="radio" name="sex" checked="checked" value="famle"/>女<br/>
<!-- 单选按钮必须分组，一组只能选一个 ，checked是默认被选中的意思-->

熟悉技术语言：<input type="checkbox" name="programming" value="java"/>JAVA<input type="checkbox" name="programming" value="HTML"/>HTML<input type="checkbox" name="programming" value="C++"/>c++<br/>
<!-- 多选按钮-->

选择国家：<!-- 下拉菜单 -->
 <select name="country">
 <option value="none">--选择国家--</option>
  <option selected="selected" value="CN">--中国--</option><!-- selected是设定默认值 -->
   <option value="USA">--美国--</option>
    <option value="UK">--英国--</option>
     <option value="Japan">--日本--</option>
 </select><br/>
选择文件：<input type="file" name="file"/>  <br/>

隐藏区域：<input type="hidden" name="my" value="20"/> <br/>
<!-- 此区域不需要客户端用户看到，但是数据需要提交给服务端，这时这些数据就可以定义在隐藏区域中，用name和value记录 -->

按钮：<input type="button" value="按钮" onclick="alert('自定义事件')"/> <br/>

图片：<input type="image" src="D:/java基础视频/day28-HTML/1.jpg" height="200px" width="200px"/> <br/>
<!-- 该图片带有提交功能，可以用于美化提交按钮 -->

 个人描述：
 <textarea rows="5" cols="20" name="text"></textarea><br/>

<input type="submit"/>
<!-- 本身具有默认事件：将form标签内所有组件中输入的数据封装后提交给服务端 -->

 <input type="reset"/><br/>
 <!-- 重置，让所有的组件还原成初始化状态 -->

</form>
</body>
</html>

可以依照以上设计一个注册表单

<html>
  <head>
    <title>register.html</title>
    <meta http-equiv="content-type" content="text/html; charset=GB18030">  
  </head>

  <body>
    <form action="http://"http://10.10.104.240:19029" method="get">
    <!-- action明确提交的目的地，method明确提交方式 -->
    <table border="1" widtr="500px" cellpadding="5" cellspacing="0">
    <tr>
    <th colspan="2">用户注册</th>
    </tr>

    <tr>
    <td> 用户名 </td>
    <td><input type="text" name="user" value="请输入姓名"/></td>
    </tr>

    <tr>
    <td>输入密码</td>
    <td><input type="password" name="psw"/></td>
    </tr>

    <tr>
    <td>确认密码：</td>
    <td><input type="password" name="repsw"/></td>
    </tr>

    <tr>
    <td>性别</td>
    <td><input type="radio" name="sex" value="male"/>男
        <input type="radio" name="sex" checked="checked" value="famle"/>女</td>
    </tr>

    <tr>
    <td>熟悉的编程语言</td>
    <td><input type="checkbox" name="programming" value="java"/>JAVA
        <input type="checkbox" name="programming" value="HTML"/>HTML
        <input type="checkbox" name="programming" value="C++"/>c++</td>
    </tr>

    <tr>
    <td>国家</td>
    <td><select name="country">
 <option value="none">--选择国家--</option>
  <option selected="selected" value="CN">--中国--</option><!-- 设定默认值 -->
   <option value="USA">--美国--</option>
    <option value="UK">--英国--</option>
     <option value="Japan">--日本--</option>
 </select></td>
    </tr>    
    <tr>
    <th colspan="2">  
    <input type="submit" value="提交数据"/> 
    <input type="reset" value="重置数据"/> 
    </th>
    </tr>        
    </table>

    </form>
  </body>
</html>

这里写图片描述

二、表单提交方式
上述代码中使用的提交方式是get，在form标签用method来定义，实际上表单的提交方式常用的有两种：
get提交方式和post提交方式
两者区别区别：
1.存储方式
get提交会将提交的信息显示在地址栏，post提交不会将提交的信息显示在地址栏
如下图
get提交方式，可以发现，提交之后会在地址栏将所要提交的信息全部显示在地址栏
这里写图片描述
post提交方式，可以发现，这种提交方式会将所要提交的信息封装，不会在地址栏显示

2.敏感信息
get提交对于敏感信息不安全，post提交对于敏感信息安全
3.提交数据体积
get提交因为存储在地址栏，数据体积有限；post提交可以提交大体积数据
4.封装方式
get提交将提交的数据封装在请求头的请求行中，post提交将提交的数据封装在请求体中。
5、其他
get提交中文，Tomcat服务器，需要先通过ISO8859-1先编码，再解码
post提交中文，可以先通过ISO8859-1先编码，再解码的方法；也可以直接通过服务器端的request对象的setCharcterEncoding(“gbk”)进行直接解码.
综上，表单提交建议使用post提交（百度搜索是get提交，因为没有敏感信息，所要提交的数据也不是很大）

和服务器端的三种交互方式:
1.地址栏输入url地址：get方式
2.点击超链接：get方式
3.表单：get或者post方式

三、表单的校验问题
如果在表单页面上加入了校验，判断每一个组件，只要有一个组件填写错误，无法提交
问：服务端在收到该数据时，还需要再次校验吗？
答：为了安全性，服务端需要再次校验
问：如果把校验定义在服务器端，表单页面还需要校验吗？
答：需要，为了增强用户的体验效果和减轻服务器端的压力

一斤草莓吃光光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML语言标签之表单

表单标签是很常用的标签，用于与服务器端的交互。一、输入标签：用于接收用户的输入信息html> head> title>input.htmltitle> meta http-equiv="content-type" content="text/html; charset=GB18030"> head> body> form> 用户名：input t
复制链接

扫一扫