表单 From

作者: 思思有礼 | 来源:发表于2017-08-27 03:31 被阅读0次

表单
表单是用来提交资料、意见，规范流程执行过程的格式。在网页中主要负责数据采集功能。
表单标签：
这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单标签包含：

表单域：包含了文本框、密码框、隐藏域、文本域、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

标签
一、form标签
在HTML 中，<form></form>标签对用来创建一个表单，即定义表单的开始和结束位置，在标签对之间的一切属于表单的内容。
每个表单元素开始 <form> 标签，可以包含所有的表单控件，还有必需的伴随数据，如控件的标签、处理数据的脚本或程序的位置等。在表单的<form>标签中，还可以设置表单的基本属性，包含表单的名称、处理程序、传送方法等。一般情况下，表单的处理程序（action）和传送方法（method）是必不可少的参数。
语法：<form action = "url" name="表单名称" method = "get | post" enctype = "mime" target = "..."> ... </form>
实例代码：
<form action="mailto:sisi@qq.com" name="register" method = "post" enctype = "text/plain" target = "_self"> ... </form>
注意：mailto 后跟的是收信人。mailto 可使用参数列表：
to，收信人；suject，主题；cc，抄送；bcc，暗抄送；body，内容；

表单的基本属性：

处理程序
属性：action，用来指定处理提交表单的格式（也就是：在提交表单的内容时，可以使用action属性进行定义。）。它属性值可以是程序，也可以是一个完整URL。
语法：<form action = "表单的处理程序"> ... </form>
说明：在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。（如印象笔记 —— PHP —— 20170807 逻辑和 if 语句判断—— 如“一、逻辑思维”内容。）这个地址可以是绝对地址，也可以是相对地址，还可以是一些气人啊的地址形式，如发送E-mail 等。
样例代码：<form action="mailto:2264882279@qq.com"> ... </form>
表单名称
属性：name ，用来给表单起个名字。它属性值建议写易懂的英语单词（可以上网搜索关于“命名规范”文章）。起名字是为了防止表单信息在提交到后台处理程序是出现混乱，不同的表单尽量不用相同的名称，避免混乱。
语法：<form name="表单名称"> ... </form>
说明：表单名称中不能包含特殊符号和空格。
举例代码：<form action="mailto:2264882279@qq.com" name="research"> ... </form>
编码方式
属性：enctype，在提交表单内容时，可以使用enctpye 参数进行设置提交的编码方式。它的属性值请看 表格1；
语法：<form enctype="编码方式"> ... </form>
senctype 属性为表单定义了MIME 编码方式，编码方式的取值，如下表：
表格1：

属性值	属性值的含义
text/plain	以纯文本的形式传送
application/x-www-form-urlencoded	默认的编码形式
multipart/form-data	MIME 编码，上传文件的表单必须选择该项

样例代码：
<form action="mailto:2264882279@qq.com" name="research" enctype="Text/plain">...</form>

传送方法
属性：method，用来定义处理程序从表单中获得信息的方式，有两个属性值可供选择 get 或 post 。
1、method = get 使用这个设置时，表单数据会被视为CGI 或 ASP 的参数发送，也就是来访者输入的数据会附加在URL 之后，由用户端直接发送到服务器，所以速度上会比post 快，但缺点是数据长度不能够太长。在没有指定method 的情形下一般都会视 get 为默认值。
2、method = post 使用这个设置时，表单数据是与URL 分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度上也会比POST慢。
语法：<form method="传送方式"> ... </form>
说明：传送方式只有两个选择： get 或 post。
<form action="mailto:2264882279@qq.com" name="research" enctype="Text/plain" method="post"> ... </form>
目标显示方式：target
属性：target，用来设置需要指定目标窗口的打开方式。表单的目标窗口中是用来显示表单的返回信息，如提示提交成功和失败等。
语法：<form target="目标窗口的打开方式"> ... </form>
说明：目标窗口的打开方式包含4个取值：_blank 、_self 、_parent 、_top。4个取值的含义，分别：
_blank ：是指将返回信息显示在一个新的、无名浏览器窗口打开；
_self ：表示将返回信息显示在当前浏览器窗口中；
_parent ：是指将返回信息显示在父级的浏览器窗口中打开。这个值在当前框没有父框时等价于_self；
_top ：表示将返回信息显示在顶级浏览器窗口中。
把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；这个值等价于当前框没有你框时的_self.
样例代码：<form action="mailto:2264882279@qq.com" name="research" enctype="Text/plain" method="post" target="_blank"> ... </form>

二、input 标签：
最常用的控件标签，包含文本域、按钮都是采用的这个标签。
语法：

<form>
     <input type = "控件类型" name = "控件名称"/>
</form>

type 参数，如下图：

Image.png

三、输入类控件，使用input标签：
文字字段，也称文本框（text）
是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。
语法：<input type="控件的类型" name="控件名称" size="控件的长度" maxlength="最长字符数" value="文本框的默认取值"/>
样例代码：<input type="text" name="example1" size="20" maxlength="15" placeholder="请输入用户名"/>

密码框（password）
是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
语法：<input type="password" name="控件名称" size="控件的长度" maxlength="最长的字符数" value="密码域的默认值，同样以“●”显示 "/>
样例代码：<input type="password" name="example3" size="20" maxlength="15"/>

隐藏域（hidden）
隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
语法：<input type="hidden" name="控件名称" value="提交的值">
样例代码：<input type="hidden" name="ExPws" value="dd">
HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单添加隐藏域</title>
</head>
<body>
  <p>填写下面资料：</p>
  <form action="mailto:2264882279@qq.com" name="hidden" method="post">
    姓名：<input type="text" name="name" size="20"/><br/>
    年龄：<input type="text" name="age" size="20" maxlength="2"/><br/>
    学历：<input type="text" name="privatewed" size="20" maxlength="15" value="本科" /><br/>
    <input type="hidden" name="page_id" value="example">
  </form>
</body>
</html>

复选框（checkbox）
复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。
语法：<input type="checkbox" name="控件名称" value="复选框的值 " checked/>
说明：name属性定义复选框的名称，要保证数据的准确采集，在同一组中的复选项都必须用同一个名称；
value属性定义复选框的值，在同一组中，它们的域值必须是不同的。
checked属性定义表示改选项在默认情况下已经被选中，一个选择中可以有多个复选项被选中。有的浏览器无法显示已选中的选项，可以试下：checked="checked" 。
样例代码：
<input type="checkbox" name="yesky" value="09" checked/>
<input type="checkbox" name="Chinabyte" value="08"/>
HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单中添加复选框</title>
</head>
<body>
    <h3>选项</h3>
    <form action="" name="xlcs" method="post">
         姓名：<input type="text" name="username" size="15" maxlength = "20"/>
        <hr> 你的性别： <hr/>
        <input type="radio" name="genders" value="female"/>女性
        <input type="radio" name="genders" value="male"/>男性<br/><br/>

        <label>广东省三天游</label><br/>
        <input type="checkbox" name="diet" value="answerA" **checked="checked"**/>广州
        <input type="checkbox" name="diet" value="answerB" />深圳
        <input type="checkbox" name="diet" value="answerD" **checked="checked"** />佛山
        <input type="checkbox" name="diet" value="answerE" />珠海
        <input type="checkbox" name="diet" value="answerF"/>其它<br/><br/>

        <label>忌讳食物</label><br/>
        <input type="checkbox" name="alcohol" value="answerA"/>鸡肉
        <input type="checkbox" name="alcohol" value="answerB" **checked**/>猪肉
        <input type="checkbox" name="alcohol" value="answerC" **checked** /> 生食
        <input type="checkbox" name="alcohol" value="answerE"/>其它<br/><br/>
    </form>

</body>
</html>

单选框（radio）
当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。
语法：<input type="radio" name="控件名称" value="单选框的默认值" checked="checked"/>
说明：
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value 用来设置用户选中该项目后，传送到处理程序中的值。
checked 属性表示这一单选按钮默认被选中，而在一个单选按钮组中只能有一项单选按钮控件设置为checked。
样例代码：
<input type="radio" name="myFavor" value="1" checked="checked">
<input type="radio" name="myFavor" value="2">
HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单中添加（多个）单选按钮</title>
</head>
<body>
    <h3>选项</h3>
    <form action="" name="xlcs" method="post">
        你的性别：
        <input type="radio" name="test" **checked="checked"**/>男性
        <input type="radio" name="test" value="answer" />女性
        <br/>
        <hr/> <!--**此标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。**-->
        如下哪种不是水果？<br/>
        <input type="radio" name="test1" value="answer1"/>香蕉
        <input type="radio" name="test1" value="answer2"/>杯子
        <input type="radio" name="test1" value="answer3"/>西瓜
        <input type="radio" name="test1" value="answer4"/>山竹
    </form>
</body>
</html>

图像域（image）
在页面中，还有一种特殊的图像域控件，使用它可以创建特殊效果的按钮，因此也常常被称为图像提交按钮。
语法： <input type="image" name="控件名称" src="图像地址"/>
说明：src 属性图像地址可以是绝对地址或相对地址。
样例代码：<input type="image" name="image1" src="study.jpg "/>

文件上传框，也称：文件域（file）
有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。
注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。
语法：<input type="file" name="控件名称"size="控件的长度" maxlength="最长字符数" />
样例代码：<input type="file" name="myfile" size="15" maxlength="100"/>

提交按钮（submit）
提交按钮用来将输入的信息提交到服务器，不用设置onclick 参数。
语法：<input type="submit" name="按钮名" value="按钮上显示文字 ">
样例代码：<input type="submit" name="mySent" value="发送">

复位按钮，也称重置按钮（reset）
单击重置按钮后，可以清除表单的内容，恢复默认的表单内容设定。
语法：<input type="reset" name="按钮名称" value="按钮上显示文字">
样例代码：<input type="reset" name="myCancle" value="重新设置">

一般按钮（button）
一般按钮用来控制其他定义了处理脚本的处理工作。在网页中按钮也很常见，在提交页面、恢复选项时常常需要用到按钮。
语法：<input type="button" name="按钮名称" value="按钮上显示文字" onclick="处理程序">
说明：在button 参数中可以通过添加onclick 参数来实现一些特殊的功能，onclick 参数是设置当鼠标单击按钮的时所进行的处理。
样例代码：<input type="button" name="myButtion" value="保存" onClick="javascript:alert('it is a button')">
HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单添加普通按钮</title>

</head>
<body>
    <p>下面是几个有不同功能的按钮：</p>
    <form action="mailto:2264882279@qq.com" name="button" method="post" >
      <!--在页面中添加一个普通按钮-->
      <input type="button" name="button1" value="普通按钮"/>
      <!--在页面中添加一个关闭当前窗口的按钮-->
      <input type="button" name="close" value="关闭当前窗口" onclick="window.close()"/>
      <!--在页面中添加一个打开新窗口的按钮-->
      <input type="button" name="openNew" value="打开窗口" onclick="window.open()" />
    </form>
</body>
</html>

四、文本域（textarea）
文本域，可以称为多行文本框。在网页上有一类框架称为“文本域”，它可以添加多行的文字，这样就可以输入更多的内容。一般用于留言板或意见栏。
语法：
<textarea name="文本域名称" cols="列数" rows="行数" wrap="virtual"></textarea >
说明：
wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
默认值是文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现；
Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行；
Virtual，允许文本自动换行。
Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。
样例代码：
<textarea name="example2" cols="20" rows="2" wrap="Physical"></textarea>

四、列表/菜单的标签
菜单列表类的控件主要用来选择给定答案中的一种，这类选择往往答案比较多，而单项框比较浪费空间。可以说，菜单列表类的控件主要是为了节省页面的空间而设计的。

列表和菜单类，也称下拉选择框（<select>和<option> 标签实现）
允许你在一个有限的空间设置多种选项。
语法：

<select name="列表项名称" size="显示的列表项数 " multiple>
     <option value="选项值" selected="selected">...</option>
     <option value="选项值" >...</option>>
           ...
</select>

属性解释：
size属性定义下拉选择框的行数；
name属性定义下拉选择框的名称；
multiple属性表示可以多选，如果不设置本属性，那么只能单选；
value属性定义选择项的值；
selected属性表示默认已经选择本选项。
样例代码 1：

     <select name="mySel" size="1">
          <option value="1" selected></option>
          <option value="2"></option>
     </select>

样例代码2（按Ctrl可以多选）：

     <select name="mySelt" size="3" multiple>
          <option value="1" selected></option>
          <option value="2"></option> 
          <option value="3"></option>
     </select>

HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单列表类</title>
</head>
<body>
    <h3>出游计划</h3>
    <form action="" name="xlcs" method="post" name="invest">
        请选择出游人数：<input type="text" name="number" size="8" maxlength="10"/><br/><br/>

        请选择你喜欢的城市：<br/>
        <select name="city" size="3" multiple="multiple">
              <option value="beijing" >北京</option>
              <option value="shanghai" selected="selected">上海</option>
              <option value="xizang" >西藏</option>
              <option value="guizhou" >贵州</option>
              <option value="hangzhou" >杭州</option>
              <option value="guangxi" >广西</option>
        </select><br/><br/>

        请选择你喜欢的出游选择：<br/>
        <select name="travelOptions" size="4">
            <option value="travelAgency">旅行社</option>
            <option value="independentTravel" selected="selected">自助游</option>
            <option value="semiSelfTour">半自助游</option>
            <option value="viewSpot">景点门票</option>
        </select><br/><br/>

        请选择出游天数：<br/>
        <select name="days">
            <option value="one">一天</option>
            <option value="two">二天</option>
            <option value="three">三天</option>
            <option value="four">四天</option>
            <option value="five">五天</option>
            <option value="six">六天</option>
            <option value="seven">七天</option>
            <option value="More days">七天以上</option>
        </select>
    </form>
</body>
</html>

五、id标记
在HTML 的表单元素中，还有一个id 标记。这一标记是一个较为特殊的标记，它主要用于标记一个唯一的元素，这个元素可以是文字字段，可以是密码域，也可以是其他的表单的元素，甚至可以定义一幅图像、一个表格。但是在实际应用中，表单是使用id 标记最多的一类元素。
语法：<id = "元素的标识名称">
说明：在HTML 中，由于id 是用来中怒斥页面的唯一元素，因此在定义标识的时候最好要根据其含义进行命名。
样例代码：<input type="text" name="username" size="10" id="username"/>
HTML 代码：

<!DOCTYPE HTML>
<html>
<head>
     <meta charset="utf-8"/>
     <title>表单定义id 标记</title>
</head>
<body>
     <p>调查表</p>
     用户名：<input type="text" name="username" size="15" id="username" /><br/>
     密码：<input type="password" name="password " size="15" maxlength="6"  id="username" /><br/>
     <label>留言：</label>
     <textarea name="comment" rows="10" cols="50"></textarea>
     <input type="submit" name="submit" value="提交"/>

</body>
</html>

在该实例中，定义了用户名的文字字段id 为username 。而在运行程序时，页面中并不显示该id，只是在将信息传送到服务器会同时被提交。

表单 From

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读