HTML-表单

合集下载

html form用法

html form用法HTML 表单（HTML Form）是 HTML 中用于收集用户输入的一种常用工具。

它由表单元素组成，包括输入框、单选框、多选框、下拉列表、提交按钮等。

通过表单，用户可以向服务器提交数据，以便服务器进行处理。

下面是一个简单的 HTML 表单示例：```html<!DOCTYPE html><html><body><h2>HTML 表单</h2><form action="/submit_form" method="post"><label for="fname">名字：</label><br><input type="text" id="fname" name="fname"><br><label for="lname">姓氏：</label><br><input type="text" id="lname" name="lname"><br><br><input type="submit" value="提交"></form></body></html>```在上面的示例中，我们创建了一个名为`HTML 表单` 的表单。

表单使用 `post` 方法将数据发送到`/submit_form` 页面。

表单中包含两个文本输入框，分别用于输入名字和姓氏。

最后，表单包含一个提交按钮，用户点击该按钮即可将数据提交给服务器。

简述使用html创建表单的基本步骤

简述使用html创建表单的基本步骤使用HTML创建表单的基本步骤随着互联网的发展和普及，表单成为了我们日常生活中经常接触到的一种交互方式。

无论是在注册网站账号、提交订单还是填写问卷调查，表单都起到了关键作用。

在创建网页中的表单时，我们可以使用HTML语言来实现。

下面将介绍如何使用HTML创建表单的基本步骤。

第一步：创建表单标签在HTML中，我们使用<form>标签来创建表单。

在<form>标签中，我们可以指定表单的属性和提交方式。

以下是一个基本的表单标签的示例：```<form action="submit.php" method="post"> </form>```第二步：添加表单元素在<form>标签内部，我们可以添加各种表单元素，如输入框、复选框、单选按钮、下拉菜单等。

每个表单元素都需要使用相应的HTML标签来表示。

以下是几种常见的表单元素示例：```<form action="submit.php" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><br><label for="gender">性别：</label><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label><br><label for="hobby">爱好：</label><input type="checkbox" id="music" name="hobby" value="music"><label for="music">音乐</label><input type="checkbox" id="sports" name="hobby" value="sports"><label for="sports">运动</label><br><label for="city">城市：</label><select id="city" name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><br><input type="submit" value="提交"></form>```在上述示例中，我们使用了<input>标签来创建输入框、复选框和单选按钮。

html表单布局及CSS样式

HTML（二）一、HTML中的特殊符号1.常用的特殊符号：特殊符号字符实体示例空格   A    B大于号> >a <b<br/>小于号< < <html><br/>引号"" " &quot姓名&quot<br/>版权符号 © Copyright© All Reserved2.表单（标签<form>）2.1、表单的基本语法：<form 属性action="表单提交地址" method="提交的方法">action：规定到表单提交之后，由谁处理，默认为当前页面 method：有两种取值get和post（更安全，数据量更大）表单内部由大量表单元素构成2.2、表单元素的基本格式<input name="表单元素的名称" type="类型" value="值" size="显示的宽度" maxlength="最大输入字符长度"checked="checked(是否被选中)" / >2.3、表单元素的逐一介绍1、文本框（type:txt）<input name="username" type="txt" value="张三" size="20" />2、密码框<input name="psswd" type="password" size="20"> 3、重置、提交和普通按钮<input name="reset" type="reset" value="重置" /><input name="submit" type="reset" value="提交" /><input name="button" type="reset" value="普通" />4、单选按钮（radio）<input type="radio" name="gen" value="男" checked="checked" /><img src="images/Male.gif" alt="男"/>男<input type="radio" name="gen" value="女" /> <img src="images/Female.gif" alt="女"/>女5、复选框（check和post）<input type="checkbox" name="hobby" value="sports" />运动   <input type="checkbox" name="hobby" value="swimming" />游泳   <input type="checkbox" name="hobby"value="play" checked="checked"/>玩游戏6、文件域（上传文件）<input type="file" name="files" /><br/> <input type="button" name="upload" value="上传" />7、下拉列表框<select name="bmon" ><potion value="0">一月</option><potion value="1">二月</option><potion value="2">三月</option><potion value="3">四月</option><potion value="4">五月</option><potion value="5">六月</option><potion value="6">七月</option><potion value="7">八月</option><potion value="8">九月</option><potion value="9">十月</option><potion value="10">十一月</option><potion value="11">十二月</option></select >月 8、多行文本域<textarea name="serviceprotocol" cols="60" rows="6" >欢迎阅读服务协议</textarea>9、隐藏域<input type="hidden" name="userid"value="777" />10、只读和禁用属性a、只读<textarea name="serviceprotocol" cols="60" rows="6" readonly="readonly">欢迎阅读服务协议</textarea>b、禁用同意以上协议<input type="checkbox" name="accept" />  <input type="submit" value="注册" disabled="disabled"/> 3.HTML的注释要避免在注释内容中使用<！--------------注释内容------------>(不规范)可以用= =或者##代替--4、表格布局4.1、基本语法< table><tr> //行<td>百度</td>//单元格 </tr><tr><td>猫扑</td></tr><table>4.2、跨列<td colspan="2">学生成绩</td>//跨两列4.3、跨行<td rowspan="2">李四</td>4.4、跨行跨列<td colspan="3" align="center">学生成绩</td>5、表格的高级标签表格数据的分组标签<thead>,<tbody>,<tfoot>6、表格布局采用form-table-tr-td进行页面布局7、CSS样式表CSS是Cascading Style Sheets 的缩写，层叠样式表（W3C规范之一），把网页的内容和外观的美化分开。

html问卷调查表单

<optionvalue="male">男</option>
<optionvalue="female">女</option>
</select><br><br>
<labelfor="country">国家：</label>
<inputtype="text"id="country"name="country"><br><br>
<labelfor="comments">意见和建议：</label><br>
<textareaid="comments"name="comments"rows="4"cols="50"></textarea><br><br>
<inputtype="submit"value="提交">
</form>
</body>
</html>
这个表单包括姓名、邮箱、年龄、性别、国家和意见和建议等字段。当用户填写完表单后，可以点击提交按钮将表单数据提交到服务器的"/submit_survey"处理程序。请注意，这只是一个简单的示例，实际应用中可能需要更多的表单字段和验证逻辑。
html问卷调查表单示例如下：
<!DOCTYPEhtml>

htmltable表单用法

HTML表格（table）是一种用于显示数据的数据结构，它可以包含行（tr）和列（td）。

以下是一个简单的HTML表格表单用法示例：```html<!DOCTYPE html><html><head><title>HTML表格表单</title></head><body><h2>简单的HTML表格表单</h2><table border="1"><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tr><td>张三</td><td>25</td><td>北京</td></tr><tr><td>李四</td><td>30</td><td>上海</td></tr><tr><td>王五</td><td>28</td><td>深圳</td></tr></table></body></html>```在这个示例中，我们创建了一个包含3列（姓名、年龄、城市）的表格。

每行表示一个人的信息，包括他们的姓名、年龄和所在城市。

我们还为表头添加了`<th>`标签，以区分表头和表格内容。

HTML表单实例.ppt

• 背景色彩和文字色彩 – <body bgcolor=# text=# link=# alink=# vlink=#> • bgcolor --- 背景色彩 • text --- 非可链接文字的色彩 • link --- 可链接文字的色彩 • alink --- 正被点击的可链接文字的色彩 • vlink --- 已经点击(访问)过的可链接文字的色彩 • #=rrggbb • 色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
• 图象和文字的对齐 <img align=#> #=top, middle, bottom
<img src=URL align=right>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>
My Face! It is always smiling. Hahaha....
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
华师大软件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2

html表单练习题

html表单练习题HTML（超文本标记语言）表单是网页中收集用户输入数据的主要工具。

通过使用不同的HTML输入元素和属性，可以创建各种类型的表单，如文本输入框、单选按钮、复选框、下拉列表等。

本文将提供一些HTML表单练习题，帮助读者熟悉和练习HTML表单的使用。

1. 文本输入框使用HTML创建一个简单的文本输入框，用户可以在其中输入自己的名字。

确保输入框有适当的标签和属性来描述其用途，并设置最大字符限制为10个字符。

2. 单选按钮创建一个包含三个选项的单选按钮组，用于选择用户的喜爱的颜色。

每个单选按钮都应该有一个合适的标签和值。

3. 复选框在一个表单中创建一个包含四个选项的复选框组，用于选择用户感兴趣的不同领域。

每个复选框都应该有一个适当的标签和值，让用户可以同时选择多个选项。

4. 下拉列表创建一个下拉列表，其中包含用户感兴趣的学科。

列表中应该至少包含三个选项，每个选项都有一个适当的标签和值。

5. 提交按钮在表单底部创建一个提交按钮，让用户可以点击以提交表单内容。

确保按钮具有适当的标签和属性，如ID和名称。

以上是一些HTML表单的练习题。

通过完成这些练习，读者可以熟悉并加深对HTML表单的理解和应用。

请按照提供的题目和要求完成每个练习，注意正确使用HTML标签和属性，以及合适的文本描述和值。

可以根据需要进行样式调整，使表单更加整洁和美观。

完成所有练习后，您可以在浏览器中打开HTML文件，查看和测试表单的功能和外观。

这些练习将帮助您熟练掌握HTML表单的创建和使用，为以后的网页开发工作打下坚实的基础。

希望这些HTML表单练习题对您有所帮助！祝您学习愉快，提升HTML编程技能！。

表单HTML代码

表单：整体的注册信息；表单提交必须有<form>标签<input type=”text” size=”” maxlength=””><input type=”password” size=””maxlenth=””><input type=”radio” name=”” checked=”checked”><input type=”checkbox” checked=”checked”> <input type=”file”><select><option selected=”selected”>内容</option> </select><textarea cols=”” rows=””></textarea><form action=””method=””></form>1:让reset按钮产生取消作用2：依靠action属性，跳转网页3：提交方式：get：会显示表单所填的内容Post：隐藏表单所填的内容框架：把一个网页分割成多个网页，把网页body标记删除<frameset rows/cols=“20%，*”><frame src=”1.html” noresize=“noresize”Name=””/><frame src=”2.html”noresize=“noresize”Name=””/>:插入页面</frameset> 分割网页Rows：上下分Cols：左右分Noresize：固定骨架Name:起名字某个页面加连接<a href=”” target=”b”></a> Target:在框架中某个区域显示内容。

HTML FORM表单,input标签的说明

HTML 表单(Form)是 HTML 的一个重要部分，主要用于采集和提交用户输入的信息。

一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：<form action="form_action.asp" method="get"> First name: Last name:<input type="text" name="fname" /><input type="text" name="lname" /><input type="submit" value="Submit" /></form>HTML 表单(Form)常用控件(Controls)HTML 表单(Form)常用控件有：      input type="text" 单行文本输入框 input type="submit" 将表单(Form)里的信息提交给表单里 action 所指向的文件 input type="checkbox" 复选框 input type="radio" 单选框 select 下拉框 textArea 多行文本输入框 input type="password" 密码输入框(输入的文字用*表示)表单控件(Form Control)：单行文本输入框(input type="text")单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。

例句如下： <input type="text" name="yourname">表单控件(Form Control)：复选框(input type="checkbox")复选框允许用户在一组选项里，选择多个。

HTML表单数据处理与提交方法讲解

HTML表单数据处理与提交方法讲解1. 介绍HTML表单是网页中收集用户数据的重要方式之一。

用户可以通过填写表单向服务器提交数据，而服务器则会对这些数据进行处理和存储。

本文将详细介绍HTML表单数据的处理与提交方法。

2. 表单数据处理在提交表单数据之前，需要对其进行处理。

处理表单数据的方式有多种，常用的包括客户端验证和服务器端验证。

2.1 客户端验证客户端验证是指通过客户端浏览器对输入的数据进行初步验证。

这种验证方法可以提供一定的用户体验，但并不可靠，因为客户端验证可以被绕过。

常见的客户端验证方法包括使用HTML5表单验证属性和JavaScript脚本。

2.2 服务器端验证服务器端验证是指在将表单数据提交到服务器之前，在服务器端对数据进行验证。

这种验证方法更加可靠，因为无论用户如何操作，数据都会经过服务器端的验证。

服务器端验证可以使用服务器端脚本语言（如PHP、Python等）进行处理，通过编写脚本逻辑实现对数据的验证。

3. 表单数据提交表单数据提交有两种主要的方法，分别是GET方法和POST方法。

3.1 GET方法GET方法将表单数据附加在URL的末尾，并以查询字符串的形式传递给服务器。

这种方法适合传递小量数据，如搜索关键字等。

通过GET方法提交的数据可以在浏览器地址栏中看到。

使用GET方法提交表单数据的示例代码如下：```html<form action="process.php" method="get"><input type="text" name="username" placeholder="请输入用户名"><input type="password" name="password" placeholder="请输入密码"><input type="submit" value="提交"></form>```在服务器端，可以使用相应的脚本语言（如PHP）来获取GET方法传递的数据。

简述使用html创建表单的基本步骤

简述使用html创建表单的基本步骤创建表单是一种常见的网页设计需求,表单可以让用户输入数据或提交表单数据。

下面是创建HTML表单的基本步骤:步骤1:HTML标签在HTML中,表单需要使用<form>标签来创建。

该标签包含多个子标签,如<label>标签用于显示表单输入字段的名称</label>,<input>标签用于定义表单输入字段,<button>标签用于创建提交按钮。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit">提交</button></form>```步骤2:标签属性表单中的每个输入字段和提交按钮都需要指定属性,以便在服务器端正确地处理它们。

这些属性包括:- `<input>`标签的属性:type(输入类型),id(标识符),name(用于在服务器端查找属性值的名称),required(是否是必须的),value(输入值),pattern(正则表达式)。

- `<button>`标签的属性:type(提交类型),name(用于在服务器端查找属性值的名称),value(提交值),background(背景颜色),color(颜色),hover(hover 状态),优惠政策(是否在浏览器缓存中保留按钮)。

例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit" name="submit" value="提交">提交</button> </form>```步骤3:表单数据表单数据通常通过<input>标签中的type属性指定,例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><input type="password" id="password" name="password" required> <input type="submit" value="提交"></form>```步骤4:提交表单数据当用户完成表单并单击提交按钮时,浏览器将向服务器发送表单数据。

html表单模板代码

html表单模板代码HTML表单是一种用于收集用户输入信息的交互性组件，一般来说表单都由多个表单元素组成，这些表单元素包括文本框，单选框，多选框，下拉框等。

HTML表单模板代码旨在为广大开发者提供模板化的HTML表单代码，方便开发者使用表单进行数据收集。

HTML表单模板代码的基本格式如下：<form action="submit-url" method="post"><label for="input-1">文本框：</label><input type="text" id="input-1" name="input-name"><label>单选框：</label><br><input type="radio" id="radio-1" name="radio-name" value="1"> <label for="radio-1">选项1</label><br><input type="radio" id="radio-2" name="radio-name" value="2"> <label for="radio-2">选项2</label><br><label>多选框：</label><br><input type="checkbox" id="check-1" name="check-name" value="1"><label for="check-1">选项1</label><br><input type="checkbox" id="check-2" name="check-name" value="2"><label for="check-2">选项2</label><br><label>下拉框：</label><br><select id="select-1" name="select-name"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><br><label for="submit-btn"></label><input type="submit" id="submit-btn" value="提交"></form>上述代码包括了文本框，单选框，多选框和下拉框等常用表单元素的演示。

第三课 HTML-表单3

HTML
Thiz科研集团 Thiz科研集团王秋野王秋野 wqy_root@ wqy_root@
表单
目的：理解表单在网页中的作用创建一个基本的表单提供一个处理表单的方法理解表单的格式化技术
表单
网络最好的特点之一是它用新的方法使新表单之间能够相互传达信息。在线式表单是实现这种普通采用的信息传达方法。例如，表单允许网站上的浏览者在站点上发表评论，订购商品，将公告张贴到公告牌上今天学习怎样创建表单，怎样在网站上有效的使用它们。理解什么是表单表单的根本目的是收集信息，当注册选举时，你要填写一张表，注明姓名，地址，出生日期等。。这张表被收集并处理。在线式表单也是同样的道理，它们也要被填写，收集和处理。
表单
任何时候，当你想在页面最初被载入时缺省的设置一个被选择的单选框时，就应该使用checked属性：
表单
选择菜单当你想让用户从很长的选项列表中选择时，可以考虑使用一个选择菜单来替代复选框或者单选按钮。选择菜单是列表，该列表被压缩成一个或多个可视选项，这与你在其他应用软件的顶部所找到的菜单一样。例如：告诉浏览器，一次只作出3个可视选择，
表单
表单
用button标签来格式化虽然input标签和button标签都可以建立一个基本的内部有文本的灰色按钮，但是button标签有附加的格式化的可能性，不像input 标签没有结尾，button既有打开标签又有结束标签，这样，当你在浏览时，你就可以在按钮上加上文本，图片，和其他的HTML。例如，如果你在打开和关闭button标签之间加入img标签，那么当浏览器浏览时，那张图片就会显示在按钮的中间。
表单
当页面被浏览时，用户在输入他们的信息之前就不得不擦去这些用来说明的短语

HTML表单基本格式与代码

HTML表单基本格式与代码咱们先来看下今天咱们需要学习的内容，理解起来很简单，像我这种英语不好的只是需要背⼏个单词在HTML中创建表单需要⽤到的最基本的代码和格式1<form method="post/get">23<input type="text"/>4<input type="password"/>5<input type="hidden"/>6<textarea></textarea>78<input type="submit"/>9<input type="button /> 10<input type="image" />11<input type="reset"/>1213<input type="redio" name="" checked="checked" value=""/>14<input type="checkbox" name="" checked="checked" value=""/>15<input type="file"/>16<select>17<option value="值">内容</option>18<option value="值">内容</option>19<option value="值">内容</option>20<option value="值">内容</option>21</select>22</form>以上就是咱们需要记住的⼀点东西看起来很复杂、很⿇烦咱们来理⼀下思路总共分为三⼤类，每类分为四种，抛出textarea\select剩下的都是input tpye= 这个样式开头的那⽂本类的就是下⾯的四个input type="text".................password.................hidden<textarea><textarea/>按钮类的input type="submit"..................button..................reset..................image选择输⼊input type="redio"..................checkbox..................file<select><option></option></select>最后后咱们来补充⼀个，⼩内容，关于选择类和按钮类的综合体咱们在⼀些⽹站去注册的帐号的时候，咱们选择选项⽐如说男、⼥，不⼀定⾮要点击按钮才可以，点击汉字也能选择的上，那这个⼩技巧是什么，咱们往下看<lable for="id">按钮内容</lable>1<input type="redio" name="" checked="checked" value="男" id="001"/>2<lable for="001">男</lable>那这样咱们去点击前⾯的按钮也可以，点击这个字“男”也可以选择上，省去了⿏标、触摸板使⽤时的很多不必要的⿇烦。

html中form表单的使用方法

html中form表单的使用方法HTML中的form表单是一种用于收集用户输入数据的元素，它可以包含各种类型的输入字段，如文本框、复选框、下拉框等，同时还可以指定数据的提交方式和目标地址。

在本文中，我们将学习form表单的基本用法以及一些常用的属性和事件。

一、基本用法要创建一个form表单，我们需要使用`<form>`标签，并设置一些基本属性。

以下是一个示例：```html<form action="submit.php" method="post"></form>```在上面的代码中，我们通过`action`属性指定了表单数据提交的地址，这里使用了一个假设的地址`submit.php`。

`method`属性用于指定数据的提交方式，常见的有GET和POST两种方式。

二、输入字段form表单中最常见的元素就是各种输入字段，下面分别介绍几种常用的输入字段。

1. 文本框文本框用于接收用户输入的文本数据，通过`<input>`标签创建，其`type`属性设置为"text"。

示例代码如下：```html<input type="text" name="username" placeholder="请输入用户名">```上面的代码创建了一个文本框，用户可以在其中输入用户名。

`name`属性用于标识字段的名称，这个值将在数据提交时作为键名。

2. 复选框复选框用于接收用户的多选数据，通过`<input>`标签创建，其`type`属性设置为"checkbox"。

示例代码如下：```html<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="basketball">篮球```上面的代码创建了两个复选框，用户可以选择自己的兴趣爱好，这些值将在数据提交时作为数组传递。

html网页表单制作

html网页表单制作1.表单标签,form,……,/form,语法:,FORM name=“form_name” ACTION=“URL”METHOD=“GET|POST”,…,/FORM,Name :定义表单的名称Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为:get ; Action :用来指定表单处理程序的位置(asp 等服务器端脚本处理程序) 2.文本框文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

代码格式:,input type=“text” name=“...” size=“...” maxlength=“...” value=“...”,type=“text” 定义单行文本输入框;name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称;size 属性定义文本框的宽度，单位是单个字符宽度;maxlength 属性定义最多输入的字符数。

value 属性定义文本框的初始值3.密码框密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。

格式:<input type=“password” name=“...” size=“...” maxlength= “...” >4. 按钮类型:普通按钮、提交按钮、重置按钮。

1) 普通按钮当type 的类型为button 时，表示该输入项输入的是普通按钮。

语法格式: <input type="button" value="…“ name=“…”>Value: 表示显示在按钮上面的文字。

普通按钮经常和脚本一起使用。

2) 提交按钮通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。

例句: <input type="submit" value="提交">3) 重置按钮当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。

html 表单表格模板

border:设置边框宽度
bordercolor:设置边框的颜色(ie9以下有效，FF,谷歌，opera都有效)
eg:map.html
4】居中标签:就是将某些内容强制居中一般很少人使用
<center>
居中的内容
</center>
eg:
<center>
我是老大，你认为呢！
</center>
表格
eg:map.html
5】table标签：
1、数据的显示
2、简单的页面布局（重点）
格式:
Table tr td
<table>
i: i,ii,iii,iv,v....
如果type的值不能被识别，那么列表序列号会显示为1,2,3,4,5……
Eg:list.html
无序列表:每个列表项的前面都有一个特定符号,这样的列表
格式:
<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
Type：circle空心圆
列表、表单、表格
HTML的剩余标签
1】列表标签:
有序列表:每个列表项的前面都有个有序的序列号，这样列表
<ol >
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
type:设置列表项序列号的样式
1：1,2,3,4,5..

html--表单相关代码以及样式图片

代码如下<html><head><title>作业6</title></head> <body><font color="red" size="6">American   Metric</font><font color="blue" size="6">电子产品调查表</font><form name="form2" method="post"><br>请输入您的名字：<input name="name" id="name" type="text" value=""><br>请输入您的购买日期：<input name="year" id="year" type="text" value="" size="5">年</input><select value="" name="month" ><option value="m1" selected>1月</option><option value="m2">2月</option><option value="m3">3月</option></select>月<select value="" name="day"><option value="d1" selected>1</option><option value="d2">2</option><option value="d3">3</option></select>日<br>您是否查看过我们的在线产品目录？<input name="goods" id="goods" type="radio" value="是" checked>是</input><input name="goods" id="goods1" type="radio" value="否">否</input><br>如果查看过，您对哪些产品有兴趣购买？（选择提供的产品）<br><input name="good" id="good1" type="checkbox" value="dianshi">大屏幕电视机</input> <input name="good" id="good2" type="checkbox" value="yinp">音频设备</input><input name="good" id="good3" type="checkbox" value="ship">视频设备</input><input name="good" id="good4" type="checkbox" value="xiangji">相机</input><br>在填写订单之前，你还有什么问题、意见或建议？<br><textarea rows="5" cols="50">您的输入：</textarea><br><input type="submit" value="提交"/><input type="reset" value="重置"/></form></body></html>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

表单对象包括：
文本域 ---单行 ---多行 ---密码文本框复选框单选按钮文件域图像域按钮 ---提交 ---重置 ---普通列表/菜单 ---下拉列表 ---列表框隐藏域跳转菜单
二、表单作用
表单的典型应用
注册用户收集信息反馈信息为网站提供搜索工具
注册用户
反馈信息
单行文本输入框(TEXT)
<FORM name="form3" method="post" action=""> <INPUT type="checkbox" name="gen" value="男" 男 size="21“ maxlength=4 checked="checked"> …… </FORM>
控件的初始控件的初始宽度
查看源代码
表单元素的逐一介绍复选框值复选框名
复选框基本语法
复选框复选框名
<INPUT type=“checkbox” name="cb2" value="talk">
设置此复选 <FORM name="form4" method="post" action=""> 框被选中 …… <LABEL> <INPUT type="checkbox" name="cb2" value="talk"checked="checked"> </LABEL>聊天聊天   聊天 …… </FORM>
指定提交后，指定提交后，由服务器上那个处理程序处理
ACTION = “URL”
METHOD =“post或get” 或
演示示例1 post提交方式 get提交方式演示示例1：使用 post提交方式和 get提交方式
表单元素的统一格式
指定元素的类型，指定元素的类型，可为TEXT、RADIO、、、 SUBMIT等等控件的名称控件的名称控件的初始值控件的初始值
文本框中的内容
cols="40" rows="6"> 查看源代码 </TEXTAREA>
演示——文本框示例
表单输入元素
• 单选按钮和复选框
性别：<INPUT TYPE=radio NAME=”sex” VALUE=”male”>男性 <INPUT TYPE=radio NAME=”sex” VALUE=”female”>女性
查看源代码
表单元素的逐一介绍初始密码
密码框基本语法
密码框
密码区宽度
<INPUT type=“password ” value=“ 123456 ” size=“22”>
<FORM name="form2" method="post" action=""> …… <P>密  码：密码 <INPUT value=“ 123456 ” type="password" size="22"> </P> 密码框，密码框，22 </FORM> 个字符宽度
演示——不同的按钮效果
制作“注册”页面
本章任务
表单的工作原理
列表选项
年世界杯冠军？谁是 2010 年世界杯冠军？
表单元素的逐一介绍查看源代码设置此输入框最多
出生日期：出生日期： <INPUT name="byear" value="yyyy" size=4 maxlength=4 > <select 指定列表名称” 行数” 指定列表名称行数设置“ 选择月份选择月份]” 设置“[选择月份  年 name=“指定列表名称” size=“行数”> 年 <option value=“可选项的值” selected>…</option> 选项默认被选中可选项的值” 可选项的值 <SELECT name="bmon"> <option value=“可选项的值”> …</option> 可选项的值” 可选项的值 <OPTION value=" " selected>[选择月份 </OPTION> 选择月份] 选择月份 …… <OPTION value=0>一月一月</OPTION> 一月 </select> <OPTION value=1>二月二月</OPTION> 二月说明：说明： …… size确定列表中可同时看到的行数。确定列表中可同时看到的行数。确定列表中可同时看到的行数 </SELECT> selected默认被选中的可选项。默认被选中的可选项。默认被选中的可选项月  <INPUT name="bday" value="dd" size=2 maxlength=2 > 日
列表框基本语法
只能输入四个符号
演示——选项菜单
表单输入元素-2
• BUTTON（按钮）（按钮）
<INPUT name="button1" type="submit" value="提交"> <INPUT name="button2" type="reset" value="重置"> <INPUT name="button3" type="button" value="普通按钮">
控件中输入的最多字符个数
控件是否被选中
表单输入元素
• TEXT（文本）（文本）
身份证号<input type="Text" name="PID" value="" size34;>
密码： <INPUT type=password value=“” name=“pass" size=15>
Type 属性：属性： submit：提交按钮 reset：重置按钮 button：普通按钮
按钮类型可为表单元素的逐一介绍 button、submit 、按钮上的标签按钮名称
按钮基本语法
<INPUT type="reset" name="Reset" value=" 重填 "> 查看源代码
表单元素的逐一介绍单选按钮初始值
初始值
默认选中
单选按钮基本语法
<INPUT type="radio" value="男" checked="checked">
<FORM name="form3" method="post" action=""> <BR>性别：性别：性别 <INPUT name="gen" type="radio" class="input" value="男" checked> 男 <IMG src="images/Male.gif" width="23" height="21">男  男 …… </FORM> 设置此单选按钮被选中
<FORM name="form6" method="post" action=""> <P> <INPUT type="reset" name="Reset" value=" 重填 "> …… <INPUT type="button" name="cancel" value="取消取消"> 取消 </P> </FORM> 单击按钮，单击按钮，控件的值被重置为value属性被重置为属性中指定的初始值
查看源代码
表单元素的逐一介绍文本框文本框
多行文本框基本语法的名字
<TEXTAREA name="textarea"
的列数
文本框的行数
6行40个字符宽行个字符宽度的多行文字域 <FORM name="form7" method="post" action=""> …… <TEXTAREA name="textarea" cols="40" rows="6">欢迎阅读服务条款协议，欢迎阅读服务条款协议，欢迎阅读服务条款协议本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。网站的各种工具和服务。本协议阐述之条款和条件适用于您使用网站的各种工具和服务本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。淘宝的权利和义务 </TEXTAREA> …… </FORM>