一 HTML 表单标签
 
标签
 
描述
 
定义供用户输入的表单
 
定义输入域
 
定义文本域 (一个多行的输入控件)
 
定义了 元素的标签，一般为输入标题
 
定义了一组相关的表单元素，并使用外框包含起来
 
定义了 
 元素的标题
 
定义了下拉选项列表
 
定义选项组
 
定义下拉列表中的选项
 
定义一个点击按钮
 
    --html5
 
指定一个预先定义的输入控件选项列表
 
New    --html5
 
定义了表单的密钥对生成器字段
 
New    --html5
 
定义一个计算结果
 
二 简单例子
 
1 创建文本域
 
First name: 
 
Last name: 
 
2 创建密码字段
 
Username: 
 
Password: 
 
三 表单
 
在大多数浏览器中，文本域的缺省宽度是20个字符。
 
单选按钮(Radio Buttons)
 
 标签定义了表单单选框选项
 
Male
 
Female
 
复选框(Checkboxes)
 
 定义了复选框.
 
I have a bike
 
I have a car
 
提交按钮(Submit Button)
 
 定义了提交按钮.
 
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定
 
义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据
 
进行相关的处理。
 
Username: 
 
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传
 
送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。
 
四 实例
 
1 带边框的表单
 
Personal information:
 
Name: 
 
E-mail: 
 
Date of birth: 
 
2 带有输入框和确认按钮的表单
 
First name: 
 
Last name: 
 
3 带有复选框的表单
 
 I have a
 
bike
 
I have a car
 
4 带有单选按钮的表单
 
 Male
 
Female
 
5 从表单发送电子邮件
 
Send e-mail to someone@example.com:
 
enctype="text/plain">
 
Name:
 
E-mail:
 
Comment:
 
size="50">
 
6 简单下拉列表
 
Volvo
 
Saab
 
Fiat
 
Audi
 
7 文本域
 
我是一个文本框。
 
/html>
 
8 预选下拉列表
 
Volvo
 
Saab
 
Fiat
 
Audi
 
9 创建按钮
 
代码都直接可用，拿去花吧；

 

 
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
 
1. html表单知识大全
 
表单标记
......
 
表单属性：
 
◆ action：用于指定表单的服务端程序,规定当提交表单时，向何处发送表单数据。action取值为:第一，一个URL(绝对URL/相对URL)，一般指向服务器端一个程序，程序接受到表单提交过来的数据(即表单元素值)作相应处理
 
2. PHP 工作流 自定义表单解决方案
 
需要一个系统，可以自定义表单，然后可以有个流程， 比如申请办公用品，我填了表单后可以发给我的主管，然后他签字，再发给其他人，最后回到我手里，
 
类似OA的系统，但一般OA的系统太复杂了，我只要一个简单的，其它功能都不要，就只要一个流程
 
3. HTML表单(form)学习笔记
 

 
一个网页表单可以将用户输入的数据发送到服务器进行处理。因为互联网用户使用复选框，单选按钮或文本字段填写表格，所以WebForms的形式类似文件或数据库。例如，WebForms可以用来进入航运或信用卡资料订购产品，或可用于检索数据(例如，搜索引擎上搜索)
 
4. 表单的一些基本用法与技巧
 
用图像代替提交按钮
 
当只有一个提交按钮的时候，可以简单地实现，不用加事件函数，代码是：
 
除了标签改为input type="image"以外，其它的属性和标签的属性是一样的。
 
5. HTML表单的详细介绍
 
HTML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证。
 
6. php表单提交到数据库详解
 
一般朋友们逛一些网站的时候，想使用网站或者看到更多网站里的内容，网站会要求用户进行新用户的注册，网站会把新用户的注册信息存入数据库中，需要的时候再进行提取。
 
这样网站就会首先创建自己的数据库和对应的表，我们这里使用php创建一个简单的数据库和表，使用phpMyAdmin来创建MySql数据库和表。
 
7. 关于HTML中表单组件的具体介绍
 
form标签里面的东西，下面通过示例为大家详细介绍下其具体的使用。
 

 
相关问答：
 
1. javascript - vuejs中实现列表单选(样式改变)
 
2. html5 - 最近在自学react 求一个react表单提交的例子
 
【相关推荐】.
 
1. form表单中属性及功能应用介绍汇总
 
2. 表单元素：最全的各种html表单元素获取和使用方法总结
 
3. 关于H5和CSS3表单验证的使用教程

 
1、长 春 大 学 20 15 2016学年第 二 学期Web前端开发技术 课程实 验 报 告学 院： 计算机科学技术专 业： 软件工程 班 级： 软件14402 学 号： 姓 名： 王 悦 任课教师： 车 娜 实验五 HTML表单一、实验目的1.理解表单的构成，可以快速创建表单。2.掌握表单相关标记，能够创建具有相应功能的表单控件。3.掌握表单样式的控制，能够美化表单界面。二、内容及要求使用表单控件，并通过CSS控制表单样式制作一个学员档案，其效果如图6-1所示，满足以下要求：1.学员档案上面的标题和下面的表单两部分构成。2.标题部分通过标题标记定义。3.表单部分通过相关的表单控件进行定义图6-1 “学员档案”CSS样式效果三、实验原理表单：是网页上用于输入信息的区域，它的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现网页与用户的沟通。表单由表单控件、提示信息和表单域构成。创建表单：标记被用于创建一个表单，action、method、name为表单标记的常用属性。action属性用于指定接收并处理表单数据的服务器程序的url地址。method属性用于设置表单数据的提交方式，其。
 
2、取值为get或post。其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。post方式的保密性好，并且无数据量的限制，使用method=post可以大量的提交数据。input控件：定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等控件。select控件：可以定义下拉菜单效果。其中，标记用于在表单中添加一个下拉菜单，标记嵌套在标记中，用于定义下拉菜单中的具体选项，每对中至少应包含一对。textarea控件：定义的多行文本输入框。cols和rows为标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。CSS控制表单样式：使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。四、实验步骤1、结构分析“传智学员档案”由多个表单控件构成。整个页面可以使用一个大盒子进行整体控制，然后通过标记定义表单，并在其中嵌套相应的表单控件。另外，由于表单控件属于内块元素，不会单独占据一行，可以通过标记嵌套表单控件使其独占一行。2、样式分析(1)。
 
3、 通过最外层的div对页面进行整体控制，需要对其设置宽度和高度以及背景图片等。(2) 通过form对表单进行整体控制，需要对其设置宽度和内外边距样式。(3) 定义表单标题的样式，主要控制其文本样式及内外边距。(4) 定义各个表单控件的样式，主要控制他们的宽度、高度、文本、背景及边距等。3、制作页面结构根据上面的分析，可以使用相应的HTML标记来搭建网页结构。使用background属性设置背景图片和设置颜色了。使用设置标题。用了标签设置了一个盒子，同时根据width、height设置盒子的大小。还应用了标签，来定义表单。 4、定义CSS样式(1) 定义基础样式，应用body等标签全局控制。(2) 整体控制页面，定义的样式，以及添加背景图片。(3) 整体控制表单，定义表单的宽度、内边距样式来对表单进行整体控制。(4) 控制表单标题，应用h2标题来定义(5) 控制姓名、年龄文本框(6) 控制单选按钮及复选框，控制薪资积及多行文本框，控制按钮提交。五、实验代码及网页效果图1搭建基本结构关键代码如下：传智播客学员档案男女传智老学员朋友推荐视频教程CSDN讨论JAVA就业班网页平面UI设计就业班。
 
4、IOS就业班元/月(收入)请简述您有没有基础,以及为什么选择来传智新播客学习？效果如图6-2所示。图6-2 HTML页面结构效果图2定义CSS样式关键代码如下：bodyfont-size:12px; font-family:微软雅黑body,h2,form,img,input,select,textareapadding:0; margin:0;list-style:none; border:0;.all width:1024px; height:863px; margin:0 auto; background:url(bg.png) no-repeat;.listwidth:685px; padding:180px 0 0 340px;pmargin-top:20px;h2font-size:38px; color:#26211e; margin-bottom:60px; padding-left:50px;.txt,.agewidth:360px; height:30px; line-height:30px; padding-left:40px; color:#ccc;.txtba。
 
5、ckground:#fff url(icon2.png) no-repeat 5px 5px;.agebackground:#fff url(icon3.png) no-repeat 5px 5px;.choosewidth:390px; height:25px; line-height:25px;background-color:#FFF; padding:5px 0 0 10px;.course,.moneywidth:190px; height:25px; padding-left:10px;.moneycolor:#ddd;.money_box spanfont-size:18px; font-weight:bold; color:#fff;.messagewidth:390px; height:80px; padding:5px 0 0 10px; font-size:12px; color:#ccc;.btnwidth:390px; height:30px; background-color:#eb6854; color:#FFF; font-weight:bold;效果如图6-3所示。图6-3 “学员档案”CSS样式效果六、实验总结1掌握了盒子模型相关属性，能够使用他们熟练的控制网页元素。2理解了块元素与行内元素的区别，能够对他们进行转换。3知道如何运用表单。 解决党委自身和基层党支部存在的的突出问题，发挥各村、社区、机关单位党支部在当前城市征迁、园区建设、招商引资、服务群众、维护稳定的作用，我镇党委高度重视，制定了切合临淮实际的活动实施方案，按照中央规定的活动步骤和要求扎实有效的开展了基层组织建设年活动。7。
 
《web前端开发技术实验报告-实验五》由会员F****n分享，可在线阅读，更多相关《web前端开发技术实验报告-实验五》请在金锄头文库上搜索。

HTML form标签小结
 
    最近研究 form标签，有一些小心得写下来与大家分享分享，共勉。在小结的最后有一个form表单的小例子，可以作为参考。
                                                    -----DanlV
 
 


form是HTML的一个极为重要的功能标签之一。

 
 
输入域input
 
input type属性有如下属性值：
 1.button按钮（具体接下来细说）
 2.file用于文件选取
 3.hidden隐藏域，可以实现隐藏的操作
 4.text用于文本输入
 5.password用密码输入
 6.radio单选按钮，name属性相同的为一组
 7.checkbox多选按钮，name属性相同的为一组
 8.image图片形式提交按钮
 9.reset重置form按钮
 10.submit提交form按钮
 
alt属性，定义当按钮式图片时，提片的替代文本
src属性，定义当按钮为图片时，图片的链接地址
checked属性，定义默认选项
<input type="radio" name="" checked>
checked的值为true或false，也可以直接写成checked
disabled属性，禁用当前输入域（用法如checked）
readonly属性，对当前输入域只读，实际作用与disabled相同，但是展现出来的效果不一样（用法如checked）
maxlength属性，定义输入域字符的最大长度
name属性，定义当前的输入域的名字
value属性，定义当前输入域的默认值
 
 
文本输入区textarea
 
rows属性，规定可见行数
 
cols属性，规定可见列数
 
disabled属性，禁用当前文本输入区
name属性，当前文本区的名字
readonly属性，当前文本区域只读
 
 
按钮button
 
type类型一共有三种：
 1.type="button"普功通功能按钮
 2.type="submit"提交form表单功能按钮
 3.type="reset"重置form表单功相关属能按钮
 
disabled属性，禁用此按钮
name属性，按钮的名字
value属性，按钮上显示文本内容的默认值
 
 
下来菜单select
 
相关属性：
 1.disabled属性，禁用该菜单
 2.multiple属性，规定可同时选中多项
 3.name属性，下拉列表的名字
 4.size属性，菜单中可见项目的数目
<optgroup>标签
，定义下拉列表的选项分组，属性为：
 5.label属性，定义选项组的标记（名字），必要属性
 6.disabled属性，禁用
<optinon>
属性，定义下拉列表中的选项（此标签在
<optgroup>
标签）中，属性为：
 1.disabled属性，禁用
 2.label属性，定义当使用  时所使用的标注
 3.selected属性，规定选项（在首次显示在列表中时，与checked类似）表现为选中状态。
 4.value属性，向服务器输送的值
 
 
表单中的标记
<label>
 
为了是输入更为人性化，提高用户的体验度，再点击提示文字的时候光标自动聚焦到输入的位置，使用此标签。有两种使用方法：
 
<label for="user"></label> <inpu t type="text" name="user">
此方式使用label的for属性，值制定输入区域的name
<label > <input type="text" name="user"></label>

 将input直接放入label中，不需要使用for属性，推荐使用。
 ---
 
表单中相关元素分组fieldset
 
将表单中相关的元素进行分组，使用
<legend>
标签 定义分组标题。相关实例见最后的代码。
 
代码示例
 
 
        <form action="" method="post">
            <fieldset>
                <legend>天下第一争霸赛</legend>    
                    
            <label > 门派： <input type="text" name="menpai" id=""></label>
            <br><label >密码： <input type="password" name="psw" id="">    </label>
            <br><label >上传你的请柬： <input type="file" name="qingjian" id=""></label>
            <br>选武器： <input type="radio" name="arms" id="">刀
                        <input type="radio" name="arms" id="">剑
                        <input type="radio" name="arms" id="">枪
                        <input type="radio" name="arms" id="">鞭
            <br>挑战对手： <input type="checkbox" name="Army" id="">梅超风
                            <input type="checkbox" name="Army" id="">洪七
                            <input type="checkbox" name="Army" id="">金毛狮王谢逊
                            <input type="checkbox" name="Army" id="">张三丰
            <br><label > 选择你的门派：<select name="" id=""  >
                <optgroup label="西域">
                    <option value="天山">天山派</option>
                    <option value="昆仑">昆仑派</option>

                </optgroup>
                <optgroup label="中原" >
                    <option value="峨眉">峨眉派</option>
                    <option value="少林">少林派</option>
                    <option value="武当" selected>武当派</option>
                    <option value="天龙">天空派</option>
                    <option value="星宿">星宿派</option>
                    <option value="逍遥">逍遥派</option>
                    <option value="丐帮">丐帮派</option>
                    <option value="五毒">五毒派</option>
                    <option value="明教">明教派</option>
                </optgroup>


            </select></label>
            <br> <input type="image" src="" alt="假装有图片">
            <br> <input type="reset" value="重置"> <input type="submit" value="确定">
            </fieldset> 
        

        </form>