HTML表单

2019-01-12 本文已影响6人 Zouch在路上

一、HTML表单

表单是用来填写并收集用户信息的单子，就像银行存款单一样。HTML中的表单也是这样，比如注册QQ时填写的信息，问卷调查等都是常见的HTML表单。

二、如何制作表单

HTML中的表单通常写在<form>标签中。这是因为用户填写完相关的表单信息，需要将其发送到服务端，如果不用<form>标签包裹，那么可能出现发送的信息遗漏等问题。

Demo如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
  <form action="/" method="get">
    <div class="username">
    <label for="username">姓名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
    </div>
    <div>
        <label>性别：</label>
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女
    </div>
    <div>
    <div>
        <label>爱好：</label>
        <input type="checkbox" name="hobby" value="dota">dota
        <input type="checkbox" name="hobby" value="travel" checked>旅游
        <input type="checkbox" name="hobby" value="pet" checked>宠物
    </div>
    <div class="评论">
        <label>评论：</label>
        <textarea name="comment" id="comment" cols="30" rows="10" placeholder="请输入评论"></textarea>
    </div>
    <div>
        <label>我的car：</label>
        <select name="car">
            <option value="萨博" checked>萨博</option>
            <option value="朗逸">朗逸</option>
            <option value="别克">别克</option>
        </select>
        <input type="submit">
    </div>
  </form>
</body>
</html>

三、表单有哪些属性、分别有什么作用

（1）form标签

<form action="/" method="get" target="_self">

action:表单的提交地址。
method：表单提交的方式，通常是get/post两种方式。
target: 规定在何处打开 action URL。
- _blank，在新窗口中打开。
- _self，默认，在相同的框架中打开。
- _parent，在父框架集中打开。
- _top，在整个窗口中打开。
enctype:在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为"application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
- application/x-www-form-urlencoded:在发送前编码所有字符（默认）
- text/plain：空格转换为"+"加号，但不对特殊字符编码。
- multipart/form-data:不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

Q1 post 和 get 方式提交数据有什么区别？

表象不同，get把提交的数据url可以看到，post看不到
原理不同，get 是拼接 url， post 是放入http 请求体中
提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
get提交的数据在浏览器历史记录中，安全性不好
场景不同，get 重在 "要", post 重在"给"

（2）input标签

<input type="text" id="username" name="username" placeholder="请输入用户名">

type属性：
- text,明文文本框
- password，暗文文本框，比如密码框
- radio，单选框
- checkbox,多选框
- submit,提交按钮
- reset，重置按钮
- hidden，隐藏域写在页面代码上并不会让用户看得见，当用户填写完表单之后这条代码也会一并提交到服务器。type=hidden的value会与服务器做个校验。如果value与服务器对得上证明用户有合法的操作权限，如果value对不上服务器就会拒绝用户的操作。这一般用于识别该用户是否拥有合法的操作权限，提高了数据的安全性。
- file，用来定义输入字段和"浏览..."按钮，供文件上传

Q2 input中的name属性作用

在单选框中，可以根据name属性分组，name属性相同的为同一组。
name 属性用于对提交到服务器后的表单数据进行标识。在提交数据的时候，name和value属性的值会形成键值对，然后提交。只有设置了 name属性的表单元素才能在提交表单时传递它们的值。

（3）select标签

  <select name="car">
     <option value="萨博" checked>萨博</option>
     <option value="朗逸">朗逸</option>
     <option value="别克">别克</option>
  </select>

select标签常与option标签配合使用，主要应用场景是下拉选择框。
value值就是选项的内容，checked代表默认选择。

（4）label标签

主要作用是用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。可以提高用户体验。
比如：
<label for = "username">用户名:</label>
<input type="text" name="username1" id="username">

Q3 CSRF 攻击是什么？如何防范？

CSRF是跨站请求伪造的缩写，也被称为XSRF，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
防范CSRF攻击，其实本质就是要求网站能够识别出哪些请求是非正常用户主动发起的。这就要求我们在请求中嵌入一些额外的授权数据，让网站服务器能够区分出这些未授权的请求，比如说在请求参数中添加一个字段，这个字段的值从登录用户的Cookie或者页面中获取的（这个字段的值必须对每个用户来说是随机的，不能有规律可循）。攻击者伪造请求的时候是无法获取页面中与登录用户有关的一个随机值或者用户当前cookie中的内容的，因此就可以避免这种攻击。

HTML表单

一、HTML表单

二、如何制作表单

三、表单有哪些属性、分别有什么作用

猜你喜欢

热点阅读