Form表单基础

1. form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

  • 表单的作用是收集用户的输入信息,用户提交表单时向服务器传输数据,从而实现用户与web服务器的交互;
  • input标签使用type属性规定input元素的类型,常见有以下类型:
type 描述
text 默认。定义单行输入字段,用户可在其中输入文本
password 定义密码字段。字段中的字符会被遮蔽
checkbox 定义复选框
radio 定义单选按钮
file 定义输入字段和 "浏览..." 按钮,供文件上传
submit 定义提交按钮。提交表单向服务器发送数据。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值
button 义可点击的按钮(大多与 JavaScript 使用来启动脚本)
hidden 定义隐藏输入字段

其它类型的input标签可以参考w3school

2. post 和 get 方式的区别?

  • 对数据长度的限制不同
    • GET 方法向 URL 添加数据,URL 的最大长度是 2048 个字符;
    • POST 方法传输的数据理论上没有长度限制;
  • 对数据类型的限制不同
    • GET 方法的URL中只允许出现ASCII字符,对非ASCII字符会先编码成ASCII字符再发送请求;
    • POST 方法的数据在body中,对数据类型没有限制,允许二进制数据传输;
  • POST比GET更安全
    • GET 方法的查询字符串直接暴露在URL中,在浏览器地址栏和浏览器历史中都可以看到,不利于敏感数据的安全传输;
    • POST 方法的请求数据都包含在body中,不会直接暴露出来,相对于GET,安全性更好;
  • 语义不同
    • GET的语义是请求获取指定的资源;
    • POST的语义是根据请求对指定的资源做出处理,具体的处理方式视资源类型而不同。

3. 在input里,name 有什么作用?

name 属性规定 input 元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据;只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

4. radio 如何分组?

具有相同 name 属性的 radio 为同一组,例如:

<form>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
</form>

5. placeholder 属性有什么作用?

提供描述输入字段的提示信息,该提示会在输入字段为空时显示,并会在字段获得焦点时消失

note:刚刚试了一下,IE中会在字段获得焦点时消失,但是在chrome里面输入字符后才会消失

6. type=hidden隐藏域有什么作用? 举例说明

  • 帮助表单收集和发送信息,便于后端处理数据。用户点击提交数据的时候,隐藏域的信息也被一起发送到了后端;

  • 后端接收前端传来的数据,需要确认前端的身份,那么就可以加一个隐藏域,后端通过校验隐藏域信息来确认前端身份;

  • 有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上onclick="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的;

  • 有时候一个网页中有多个form,我们知道多个form是不能同时提交的,但有时这些form确实相互作用,我们就可以在form中添加隐藏域来使它们联系起来;

  • JavaScript不支持全局变量,但有时我们必须用全局变量,我们就可以把值先存在隐藏域里,它的值就不会丢失了;

  • 还有个例子,比如按一个按钮弹出四个小窗口,当点击其中的一个小窗口时其他三个自动关闭.可是IE不支持小窗口相互调用,所以只有在父窗口写个隐藏域,当小窗口看到那个隐藏域的值是close时就自己关掉。

7. HTML 表单的基本用法

HTML表单用<form> 标签创建,用于向服务器传输用户输入的数据,表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等,表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单元素input的常用类型已经在上文介绍过,下面再介绍form标签不同属性的作用

  • action: 该属性规定当提交表单时,向何处发送表单数据
    可能的值:
    • 绝对 URL - 指向其他站点(比如 src="www.example.com/example.htm")
    • 相对 URL - 指向站点内的文件(比如 src="example.htm")
  • method: 该属性规定如何发送表单数据,最常用的取值是”GET“和”POST“;
  • target: 该属性规定在何处打开 action URL,取值有_blank(在新窗口中打开)、_self(在相同的框架中打开,默认值)、_parent(在父框架中打开)、_top(在整个窗口中打开)和framename(在指定的框架中打开);
  • name: 该属性规定表单的名称,并且提供了一种在脚本中引用表单的方法;
  • enctype: 该属性规定在发送到服务器之前应该如何对表单数据进行编码,默认值为 "application/x-www-form-urlencoded",在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值);“multipart/form-data”:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。

下面附上表单代码实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>task5-form</title>
</head>
<body>
    <div class="userinfo">
        <form action="/userinfo" name="userinfo" method="POST">
            <div class="username">
                <label for="username">姓名:</label>
                <input type="text" id="username" name="username" placeholder="用户名">
            </div>
            <div class="password">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" value="123456">
            </div>
            <div class="sex">
                <label>性别:</label>
                <input type="radio" name="sex" value="0" checked>男
                <input type="radio" name="sex" value="1">女
            </div>
            <div class="orientation">
                <label>取向:</label>
                <input type="radio" name="orientation" value="0">男
                <input type="radio" name="orientation" value="1" checked>女
            </div>
            <div class="hobby">
                <label>爱好:</label>
                <input type="checkbox" name="hobby" value="0">dota
                <input type="checkbox" name="hobby" value="1" checked>旅游
                <input type="checkbox" name="hobby" value="2" checked>宠物
            </div>
            <div class="comment">
                <label for="comment">评论:</label>
                <textarea name="comment" id="comment" cols="30" rows="10" placeholder="ddd"></textarea>
            </div>
            <div class="mycar">
                <label for="mycar">我的car:</label>
                <select name="mycar" id="mycar">
                    <option value="0">萨博</option>
                    <option value="1">法拉利</option>
                     <option value="2">保时捷</option>
                </select>
                <input type="submit" value="提交">
            </div>
        </form>
    </div>
</body>
</html>

效果图如下:


效果图.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 表单的作用是搜集用户的输入,用户提交表...
    CYC_dc68阅读 414评论 0 0
  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 表单的作用表单用于向服务器传输数据。表...
    饥人谷_秦勤阅读 391评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • <input>标签 标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段...
    _空空阅读 4,083评论 0 3
  • form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 标签用于为用户创建HTML表单,并向服务器...
    zx9426阅读 609评论 0 1