HTML-表单标签form详细讲解学习

 

本节我们讲html表单标签，当你在网页输入框提交一个数据，这条数据一般是提交给了服务器，然后服务器根据请求返回你想要的数据，这个你输入信息的输入框或者提交的按钮就是HTML表单，所以HTML标签是用来收集用户数据的。例如你使用百度查询资料。输入内容的输入框就是一个表单：

 

HTML 表单用于搜集不同类型的用户输入，<form> 元素定义 HTML 表单，我们先来看一个简单的表单标签例子：

 

上边的例子<input type="text"> 定义用于文本输入的单行输入字段。

<input> 有很多输入类型。<input type="text"> 定义供文本输入的单行输入字段；<input type="password"> 定义密码字段；<input type="submit"> 定义提交表单数据至表单处理程序的按钮；<input type="radio"> 定义单选按钮；<input type="checkbox"> 定义复选框； <input type="number"> 用于应该包含数字值的输入字段等。

上边的例子是定义单行输入字段，我们来看一个定义密码字段的例子：

 

submit的例子，定义提交表单数据至表单处理程序的按钮：

 

单选按钮输入的例子，其中“男性”和“女性”两个按钮只能选择其中一个：

 

复选框的例子，其中有两个选框“I have a bike”和“I have a car”，可以选择一个、两个或者不选，当然，复选框可以有很多个：

 

数值输入字段的例子，以下例子能够对数字做出限制，但是需要浏览器支持：

 

以上是 <input> 表单元素相关内容，HTML表单除了<input> 元素，还有<select> 元素、<option> 元素、<textarea> 元素、<button> 元素等，接下来我们用例子看看效果:

<select> 元素定义下拉列表：

 

<option> 元素定义待选择的选项,列表通常会把首个选项显示为被选选项, 我们可以通过添加 selected 属性来定义预定义选项，我们可以看下边的下拉列表，默认显示的选项是“Fiat”:

 

<textarea> 元素定义多行输入字段（文本域）：

 

<button> 元素定义可点击的按钮，其中onclick="alert('Hello World!')"我们后续会在JS中讲解，目前只要知道点击会弹出窗口返回引号中的字符串就行：

 

HTML表单中最重要的表单元素是 <input> 元素，input属性的用法我们也很有必要学习一下：

value 属性规定输入字段的初始值，以下例子“First name”默认值为”zhangsan”：

 

readonly 属性规定输入字段为只读（不能修改）,以下例子默认值”zhangsan”是不可修改的，但是上边的例子”zhangsan”可以自行修改：

 

disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素也不会被提交：

 

size 属性规定输入字段的尺寸（以字符计），以下例子可以看到输入框尺寸加长：

 

maxlength 属性规定输入字段允许的最大长度，以下例子输入字段不能超过10个字段：

 

以上是我们今天学习的HTML表单标签常见内容，详细的属性或者更多的用法大家可以查阅资料进行学习，另外<form> 元素的不同属性还有几个重要的属性是必须要用到的：action 属性、target 属性和method 属性，这些我们后续会在讲服务器端编程的时候详细讲解，今天我们大概提一下：

action 属性定义提交表单时要执行的操作，通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中：

 

target 属性规定提交表单后在何处显示响应，_blank响应显示在新窗口或选项卡中；_self响应显示在当前窗口中；_parent响应显示在父框架中；_top响应显示在窗口的整个 body 中；framename响应显示在命名的 iframe 中，默认值为 _self，这意味着响应将在当前窗口中打开：

 

method 属性指定提交表单数据时要使用的 HTTP 方法，表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送，提交表单数据时，默认的 HTTP 方法是 GET，下面的例子在提交表单数据时使用 POST 方法：

 

这里我们要注意的是使用GET 方法提交，提交后表单值在新的浏览器标签页的地址栏中是可见的；使用 POST 方法提交，提交后与 GET 方法不同，表单值在新浏览器的地址栏中不可见，所以敏感信息是不能使用GET 方法提交的，当然，这些我们后续在服务器端编程会详细讲解。

以上就是今天的内容，欢迎关注科技现象，我们会整理学习计算机语言方面最基础的知识给大家，方便大家学习和查阅，共同让计算机给我们工作生活提供更好的服务。