表单

HTML 表单用于搜集不同类型的用户输入。

㈠Form标签

⑴form标签简介

在HTML中，如果创建一个表单，就把各种表单标签放在<form></form>标签内部。我们常说的表单，指的是文本框，按钮，下拉列表等的统称。

form一共有五个重要属性，分别是name，action，method，enctype和target属性。

语法：<form>表单各种标签</form>

 

⑵表单名称name属性

一个页面中，你的表单可能不止一个，为了区分这些表单，使用name属性来给表单进行命名。这样也是防止在表单提交之后，在后台程序中出现混乱。

语法：<form name="表单名称">......</form>

表单名称中不能包含特殊字符和空格。

 

⑶提交表单action属性

在form标签中，action属性用于指定表单数据提交到哪个地址进行处理。

语法：<form action="表单的处理程序">......</form>

表单的处理程序是表单要提交的地址，这个程序地址用来处理从表单搜集的信息。这个地址可以是相对地址，绝对地址，也可以是一些其他形式的地址。

 

⑷传送方法method属性

①在form标签中，methon属性的作用是告诉浏览器，指定将表单中的数据使用哪一种HTP提交方法，取值为get或post。

 

②methon属性取值：

   属性值                          说明

    get                 默认值，表单数据被传送到action属性指定的URL，然后这个新的URL被送到处理程序上

    post               表单数据被包含在表单主体中，然后被传送到处理程序上

③这两种方式的区别在于，get在安全性上较差，所有的表单域的值都直接显示出来了。而post除了可见的脚本处理程序之外，其他信息都可以隐藏。所以在实际开发中，通常选择post处理方式。

④语法：<form method="传送方法">......</form>

 

⑸目标显示方式target属性

①在form标签中，target属性是用来指定目标窗口的打开方式。

②target属性取值

   属性值                     说明

  _self                   默认值，表示在当前的窗口打开页面

  _blank               表示在新的窗口打开页面

  _parent              表示在父级窗口打开页面 

  _top                   表示页面载入到包含该链接的窗口，取代当前在窗口中的所有页面

 

③语法：<form target="目标显示方式">......</form>

 

⑹编码方式enctype

①在form标签中，enctype属性用于设置表单信息提交的编码方式。

②    属性值                                                                                    说明

 application/x-www-form-urlencoded                             默认的编码方式

 multipart/form-data                                                         MIME编码，对于“上传文件”这种表单必须选择该值

 

㈡表单对象

①所谓表单对象，简单来说，就是放在<form></form>标签内部的各种标签。表单对象有四种：input，textarea，select和option。

②要记住表单标签只有四个：<input>,<textarea>,<select>,<option>。其中<select>和<option>是配合使用的。

 

㈢input 标签

①input标签是自闭合标签，接下来介绍用到input标签，在不同type属性值的不同。

②语法：<input type="表单类型" />

 

⑴单行文本框   text

①文本框text共有以下几个重要的属性：

     属性                                     说明

   value                           定义文本框的默认值，也就是文本框内的文字

   size                             定义文本框的长度，以字符为单位

   maxlength                  设置文本框中最多可以输入的字符数

②对于元素属性的设置，是没有先后顺序的。input还有一个name属性，不过一般情况下都使用ID属性，很少使用name属性。

③语法：<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数" />

 

⑵密码文本框    password

①密码文本框在外观上跟单行文本框相似，也拥有相同的属性。两者不同的是：单行文本框输入的字符可见，而密码文本框输入的字符不可见。密码文本框这个设置主要是防止用户周围的人看到用户输入密码。

②语法：<input type="password" value="默认文字" size="文本框长度" maxlength="最多输入字符数" />

 

⑶单选按钮   radio

①在HTML中，单选按钮radio只能从选项列表中选择一项，选项与选项之间是互斥的。

②语法：<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值" />

③name和value是单选按钮必要的两个属性，必须要设置。value属性示为了方便向服务器端传递数据。

④单选按钮的忽略点：先看下面的代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>单选按钮</title>

 </head>

 <body>

     <form name="myForm" method="post" action="index.html">

     性别：

           <input type="radio" name="question1" value="boy" />男

            <input type="radio" name="question2" value="girl" />女

     </form>

 </body>

 </html>

效果图：

 

⑤我们把第二个单选按钮的name属性值改为“question2”,第一个单选按钮的属性值不变，为“question1”。你会看到，对于同一个问题，选两个选项居然可以被同时选中了！

   所以，对于同一个问题的不同选项，必须设置一个相同的name属性值，这样才能把这些选项归为同一个问题。

 

⑷复选框  CheckBox

①语法：<input type="checkbox" value="复选框取值" checked="checked" />

②复选框可以从选项列表中选择一项或者多项。Checked属性表示该选项在默认情况下已经被选中。复选框不需要设置选项列表的name，因为复选框是可以多选的。

③HTML中的复选框是没有文本的，需要加入label标签，并且用label标签的for属性指向复选框的ID。

④示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>复选框</title>

 </head>

 <body>

     <form name="form1" method="post" action="index.html">你喜欢的水果：<br />

           <input id="checkbox1" type="checkbox" checked="checked" /><label for="checkbox1">苹果</label><br />

            <input id="checkbox2" type="checkbox" checked="checked" /><label for="checkbox2">香蕉</label><br />

            <input id="checkbox3" type="checkbox" checked="checked" /><label for="checkbox3">西瓜</label><br />

            <input id="checkbox4" type="checkbox" checked="checked" /><label for="checkbox4">提子</label>

     </form>

 </body>

 </html>

效果图：

 

 ⑸表单按钮

①普通按钮   button

在HTML中，普通按钮一般情况下要配合JavaScript脚本来进行表单的实现。

语法：<input type="button" value="普通按钮的取值" onclick="javascript脚本程序" /> 

value的取值就是显示在按钮上的文字，onclick是普通按钮的事件。

 

②提交按钮  submit

提交按钮可以看成是一种具有特殊功能的普通按钮，单击提交按钮可以实现将表单内容提交给服务器处理。

语法：<input type="submit" value="提交按钮的取值" />

 

③重置按钮    reset

重置按钮也可以看成是一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在页面表单中输入的信息。

语法：<input type="reset" value="提交按钮的取值" />

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>重置按钮</title>

 </head>

 <body>

     <form name="form1" method="post" action="index.html">

           账号：<input type="text" /><br />

            密码：<input type="password" /><br />

            <input type="submit" value="提交" />

            <input type="reset" value="重置" />

     </form>

 </body>

 </html>

效果图：

 

注意：重置按钮只能清除“当前所在form标签”内的表单元素内容，对当前所在form标签之外的表单元素内容清除无效。

 

⑹图片域   image

①语法：<input type="image" src="图片路径" />

②图片域既有按钮的特点，也拥有图像的特点，因此需要设置图片的路径。

 

⑺隐藏域  hidden

①有时候我们想要从前台页面向后端服务器传送一些数据，但是又不想让用户看见。这个时候可以通过一个隐藏域来传送数据。隐藏域包含那些要提交处理的数据，但这些数据并不显示在浏览器中。

②语法：<input type="hidden" />

 

⑻文件域   file

①在HTML中，文件上传使用input标签。但我们在使用文件域file时，必须在form的标签中说明编码方式 enctype="multipart/form-data"。只有这样服务器才能接收到正确的信息。

②语法：<input type="file" />

 

㈣多行文本框   textarea

①语法：<texearea rows="行数" col="列数">多行文本框内容</textarea>

②在该语法中，想要对多行文本框设置默认内容，可以在标签内部添加。对于多行文本框的默认文字内容，你可以选择设置与否。

③示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>多行文本框 </title>

 </head>

 <body>

     <form name="form1" method="post" action="index.html">

           个人简介：<br />

               <textarea rows="8" cols="40">请介绍一下自己</textarea>

     </form>

 </body>

 </html>

效果图：

㈤下拉列表   select

①下拉列表由select和option这两个标签配合使用。下拉列表是一种最节省页面空间的选择方式。因为在正常状态下只显示一个选项，单击下拉菜单打开菜单后才会看到全部的选项。

②语法：<select>

                      <option>选项显示的内容</option>

                      ......

                      <option>选项显示的内容</option>

               </select>

 

⑴select标签属性

☆multiple属性：可选属性，只有一个属性值“multiple”。默认情况下下拉列表只能选择一项，当设置multiple="multiple"时，下拉列表可以选择多项。

   语法： <select multiple="multiple">

                      <option>选项显示的内容</option>

                      ......

                      <option>选项显示的内容</option>

               </select>

   想要选取多项，使用"Ctrl+鼠标左键"即可。

 

☆size属性：用来定义下拉列表展开之后可见选项的数目。

   语法：<select multiple="multiple" size="可见列表项的数目">

                      <option>选项显示的内容</option>

                      ......

                      <option>选项显示的内容</option>

              </select>

 

⑵option标签属性

    属性              说明

   value           选项值

   select          是否选中

 

☆语法：<select multiple="multiple" size="可见列表项的数目">

                         <option value="选项值" selected="selected">选项显示的内容</option>

                         ......

                        <option value="选项值"> 选项显示的内容 </option>

             </select>

☆说明：这里为每个列表项添加value值，并且使用selected="selected"来设置某一个列表项默认情况下被选中。

              value主要是用来给JavaScript调用，或者向服务器传递数据。

 

        希望有所帮助！！！！！

HTML的<form>表单标签的更多相关文章

  1. Unit 2.前端之html--table(表格),form(表单)标签

    一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...

  2. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

  3. HTML之form表单标签的学习

    from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...

  4. HTML table、form表单标签的介绍

    1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...

  5. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. [转]SpringMVC<from:form>表单标签和<input>表单标签简介

    原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

  7. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  8. form表单标签的enctype属性的作用

    Enctype是指定将数据回发到server时浏览器使用的编码类型.其编码类型有下面三种 一. application/x-www-form-urlencoded         这是通过表单发送数据 ...

  9. 前端 HTML form表单标签 textarea标签 多行文本

    <textarea></textarea>作用:允许用户录入多行数据到表单控件中 <!DOCTYPE html> <html lang="en&qu ...

随机推荐

  1. lua编译器和ide

    这里有一个网址,上面记录了大部分流行的LUA开发工具,包括IDE和Editor. http://www.wowwiki.com/Lua_editors 一.Eclipse LDT 1.语法高亮,自动提 ...

  2. 5.写一个sh脚本，可以通过一台机器控制多台机器

    先创建一个脚步文件 对这个脚本进行编辑 [hadoop@node1 ~]$ vim xcall.sh 给脚本赋予权限 执行脚本 把脚本移动到 /usr/local/bin/目录下 [hadoop@no ...

  3. MYSQL—第一部分（简介和windows版本的安装）

    一.概述 1.什么是数据库 ? 答:数据的仓库,如:在自己编写的程序中我们创建了一个 db 目录,称其为数据库 2.什么是 MySQL.Oracle.SQLite.Access.MS SQLServe ...

  4. AssertionError [ERR_ASSERTION]: Task function must be specified，gulp版本不一致

    报错信息: vue项目打包报错 > innovate-admin-vue@ build /home/soldier/SOLDIER/IDE_project/webStorm_project/in ...

  5. 2019.07.05 纪中_B

    今日膜拜:czj大佬orz%%% 2019.07.05[NOIP提高组]模拟 B 组 今天做题的时候大概能判断出题人的考点,可是就是没学过...特别痛苦 T0:栈的定义,模拟就好了T1:感觉像是找规律 ...

  6. 剑指Offer 1-41 代码（python实现）

    今天主要写了一下offer 1-41题,余下的稍后整理 1 """ 1 镜像二叉树: 递归 """ def mirror(root): if ...

  7. Spring经典高频面试题，原来是长这个样子

    Spring经典高频面试题,原来是长这个样子 2019年08月23日 15:01:32 博文视点 阅读数 719   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  8. Oracle sqlplus prelim 参数介绍

    SQL>conn / as sysdba ORA-00020: maximum number of processes (xxxx) exceeded 报错解决方法 解决 ORA-00020 错 ...

  9. C数据结构排序算法——直接插入排序法用法总结（转http://blog.csdn.net/lg1259156776/）

    声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 排序相关的的基本概念 排序:将一组杂乱无章的数据按一定的规律顺次排列起来. 数据表( data list): ...

  10. 移动端实1px细线方法

    前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2 ...