【前端学习】前端学习第三天：表单标签介绍，及HTML常用标签介绍

一、表单标签

<form>标签用来表示创建一个用户输入的HTML表单，相当于一个容器。

form标签常用属性：

1、action：定义一个URL，当点击提交按钮时，向这个URL发送输入的数据；

2、replace：定义表单提交时所做的事情；

3、method：用于向action的URL发送数据的HTTP方法，默认为get方法；

当值为get时，从服务器上获得资源，用户输入的数据会附加在URL之后，由用户端直接发送到服务器端，特点是数据的提交速度快，但数据长度不能够过长且安全性不高；

当值为post时，向服务器提交数据，表单数据和URL会分开发送，用户端的计算机会通知服务器来读取数据，所以它的特点是没有数据长度的设置且安全性较高，但速度较慢；

4、target：打开目标URL的方式：

_blank：将返回的信息显示在新的窗口打开；

_parent：将返回的信息显示在上一级浏览器窗口；

_self：将返回的信息显示在当前浏览器窗口；

_top：将返回的信息显示在顶级浏览器窗口中；

二、输入标签

<input>标签可以根据不同数据类型输入各种数据，常用属性有：

1、type属性确定输入控件的类型，其属性值有：

text：表示单行文本输入框；

number：表述单行数字文本框，可以设置最小值min和最大值max；

email：表示电子邮件输入框，可以自动校验输入的是否是有效的电子邮箱；

url：用于输入URL地址；

color：颜色选择器；

time：时间选择器，可以显示小时、分钟；

date：日期选择器，可以显示年月日；

password：密码输入框；

radio：单选按钮，当需要设置多个单选按钮时，必须让它们的name值相同，可以通过checked设置为默认选中状态；

checkbox：复选框，checked属性值默认为选中状态；

file：上传文件框；

button：生成一个普通按钮；

reset：重置按钮；

submit：提交按钮；

hidden：可以将输入框隐藏，可用于保存一些不想显示的数据；

2、autofocus属性规定当前页面加载时，自动获得输入焦点；

3、disabled属性表示禁止使用该表单控件；

4、placeholder属性表示输入提示；

 

三、下拉列表标签

通过<select>标签结合<option>标签来使用，产生出现下拉框的效果：

 

四、按钮标签

<button>标签与通过使用input创建的按钮的不同之处在于，button标签提供了更强大的功能，比如可以在图像中包含文本和图像等内容。