金沙澳门官网网址:HTML表单标签

作者: 前端知识  发布:2019-12-07

表单是网页中最常见的元素,也是用户和我们交互的重要手段,在网站中的登录、注册、信息更新这些功能都是依赖表单实现的。在HTML中对于表单提供了一系列的标签,即输入框、下拉框、按钮、文本域,如下是一个最常见的表单结构内容:

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

  • 表单的作用是搜集用户的输入,向服务器传输数据,从而实现用户与web服务器的交互。
  • Input表示Form表单中的一种输入对象,根据Type类型可分为文本输入框、密码输入框、单选/复选框、提交/重置按钮等等。
    在HTML5中,规定的 input type 属性值如下:
  • 一些type值及其作用(最后有详细版)
  • button: 定义可点击按钮
  • checkbox: 复选框
  • email : 定义用于e-mail地址字段,提交时会验证
  • file : 上传文件
  • hidden : 定义隐藏字段
  • image : 定义图像为提交按钮
  • color : 定义拾色器,定义后出现颜色调板
  • date: 定义 date 控件(包括年、月、日,不包括时间)

金沙澳门官网网址 1金沙澳门官网网址 2

2. post 和 get 方式的区别?

  • GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。 GET参数通过URL传递,POST放在Request body中。
  • GET请求在URL中传送的参数是有长度限制的,而POST理论上是不受限制的。
  • GET在浏览器回退时是无害的,而POST会再次提交请求。
  • GET和POST本质上就是TCP链接,并无差别。但是由于HTTP的规定和浏览器/服务器的限制,导致他们在应用过程中体现出一些不同。对于GET方式的请求,浏览器会把http header和data一并发送出去(一个包),服务器响应200(返回数据);而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data(两个包),服务器响应200 ok(返回数据)。”
 1 <form method="" action="" enctype="multipart/form-data(提交表单中有文件设置)">
 2     <!-- 输入框-文本框 -->
 3     <input type="text" name="文本框名称"/>
 4     <!-- 输入框-密码框 -->
 5     <input type="password" name="密码框名称"/>
 6     <!-- 输入框-单选按钮(通常是一对) -->
 7     <input type="radio" name="单选按钮名称" value="单选按钮值"/>描述文本(页面显示内容)
 8     <!-- 输入框-复选框(通常是 name属性相同的一组) -->
 9     <input type="checkbox" name="复选框名称" value="复选框值"/>描述文本(页面显示内容)
10     <!-- 输入框-文件域(注意此时必须设置表单的 enctype 属性) -->
11     <input type="file" name="文本框名称"/>
12     <!-- 下拉列表 -->
13     <select name="下列框名称">
14         <option value="下拉列表选项值(通常是一组)">下拉列表选项(页面显示内容)  </option>
15     </select>
16     <!-- 按钮-普通 -->
17     <input type="button" name="按钮名称" value="按钮页面显示文字">
18     <!-- 按钮-提交 -->
19     <input type="submit" name="按钮名称" value="按钮页面显示文字">
20     <!-- 按钮-重置 -->
21     <input type="reset" name="按钮名" value="按钮页面显示文字">
22 </form>

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

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

View Code

4. radio 如何 分组?

设置相同的name属性值.

表单结构

1 <form action="" method="POST" enctype="multipart/form-data">
2     用户名:<input type="text" name="username"/>
3 
4     <input type="submit" name="提交按钮"/>
5 </form>

如上是一个最简单的表单结果,在表单结构中需要我们掌握的内容除了表单相关的标签外,就是表单的属性。action 属性,指向服务器处理表单的程序地址,而method属性指定浏览器处理表单的方式,常用的方法包括GET、POST,如下是我们总结的一些关于这两种方式的区别:

GET,这种方法在表单提交的时候比较快,但是表单中的数据会显示在浏览器的地址栏中,所以这种方式不太安全。

POST,这种方法在提交表单的时候会对表单内容进行封装,不会显示在地址栏中,所以这种方式比较安全,不过在速度上不如GET方式。

5. placeholder 属性有什么作用?

<input type="text" name="first_name" placeholder="你的姓名..." />
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址:HTML表单标签

关键词: 金沙澳门官网