html-表单例子
HTML表单实例
6
软件学院
1.1.2 HTML基本语法
• HTML通过各种标记、元素、属性、对象等来建 立与文本、图形、声音、视频等多媒体信息、 超文本的链接。
• HTML的语法主要分为三种形式： （1）<标记>对象</标记> （2）<标记 属性1＝参数1 属性2＝参数 2 ... ...>对象</标记> （3）<标记>
13
软件学院
• Get: it is attached to the end of the URL by a ‘?”
/musicSearch.html?song_title=Hello&song_artist=Jones
• Post: it is a separated line after the blank line. song_title=Hello&song_artist=Jones&limit_number=
• 语言字符集(Charsets)的信息 -<meta http-equiv="Content-Type" content="text/html;charset=#">
#= 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
复杂表单例题html
复杂表单例题html在Web开发中，表单是用户与网站进行信息交互的重要组成部分。
复杂表单通常包含多个字段、选项和验证规则。
以下是一个HTML复杂表单的例题，包含了常见的表单元素和一些基本的验证需求。
1. 表单基本结构：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-sc ale=1.0"><title>复杂表单示例</title><link rel="stylesheet"href="styles.css"><!--样式表链接--></head><body><form id="complexForm"action="submit.php"method="post"> <!--姓名--><label for="name">姓名：</label><input type="text"id="name"name="name"required><!--邮箱--><label for="email">邮箱：</label><input type="email"id="email"name="email"required><!--电话--><label for="phone">电话：</label><input type="tel"id="phone"name="phone"pattern="[0-9] {3}-[0-9]{3}-[0-9]{4}"placeholder="123-456-7890"required><!--性别--><label>性别：</label><input type="radio"id="male"name="gender"value="mal e"checked><label for="male">男性</label><input type="radio"id="female"name="gender"value="fe male"><label for="female">女性</label><!--兴趣爱好--><label>兴趣爱好：</label><input type="checkbox"id="reading"name="interests"val ue="reading"><label for="reading">阅读</label><input type="checkbox"id="traveling"name="interests"val ue="traveling"><label for="traveling">旅行</label><input type="checkbox"id="sports"name="interests"value ="sports"><label for="sports">运动</label><!--下拉框--><label for="country">选择国家：</label><select id="country"name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option></select><!--文本域--><label for="message">留言：</label><textarea id="message"name="message"rows="4"cols="5 0"></textarea><!--提交按钮--><button type="submit">提交</button></form></body></html>2. 说明与解析：•<form>标签：包裹整个表单，定义了表单的基本属性，如action 和method。
HTML 表单ppt课件
最新课件
25
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" /> 2. 重置按钮 <input type="reset" value="" /> 3. 普通按钮 <input type="button" value="" /> 4. 图片按钮 <input type="image" src="" />
最新课件
27
<form action="Echo64.asp" method="POST">
最新课件
28
<% name = Request("Name")
HTML表单实例.ppt
• 图象和文字的对齐 <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中div 和 表单的简单运用
html中div 和表单的简单运用在HTML中，<div>和<form>是两个常用的元素，它们各自有着特定的用途。
<div>元素：<div>元素是一个块级元素，通常用于对其他元素进行分组或布局。
它本身并不代表任何特殊的语义，但其样式和布局可以通过CSS 来定义和调整。
例如，你可以使用CSS为<div>设置背景色、边框、宽度和高度等属性。
下面是一个简单的例子：html复制代码<div style="background-color: lightblue; width: 200px; height: 200px;">这是一个div元素。
</div><form>元素：<form>元素用于创建一个HTML表单，用户可以在其中输入数据，例如文本、复选框、单选按钮、提交按钮等。
这些数据可以发送到服务器进行处理。
下面是一个简单的表单例子：html复制代码<form action="/submit" method="post">姓名：<input type="text" name="name"><br>邮箱：<input type="email"name="email"><br><input type="submit" value="提交"></form>在这个例子中，当用户填写完姓名和邮箱并点击“提交”按钮后，表单数据将被发送到服务器的"/submit"路径，处理方法为POST。
结合使用<div>和<form>：你还可以将<div>元素与<form>元素结合使用，以实现更复杂的布局和样式。
html基础-form表单、input输入框、select选择框与文本框（二）
html基础-form表单、input输⼊框、select选择框与⽂本框（⼆）HTML标签：表单标签概念：⽤于采集⽤户输⼊的数据的。
⽤于和服务器进⾏交互表单标签 form：⽤于定义表单的。
可以定义⼀个范围，范围代表采集⽤户数据的范围form表单属性：1）action：指定提交数据的URL2）method:指定提交⽅式,分类：⼀共7种，2种⽐较常⽤get：1.请求参数会在地址栏中显⽰。
会封装到请求⾏中(HTTP协议后讲解)。
2.请求参数⼤⼩是有限制的。
3.不太安全。
post：1.请求参数不会再地址栏中显⽰。
会封装在请求体中(HTTP协议后讲解)2.请求参数的⼤⼩没有限制。
3.较为安全。
3）表单项中的数据要想被提交：必须指定其name属性例⼦：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单标签</title></head><body><form action="/login" method="post">⽤户名：<input name="username"><br>密码：<input name="password"><br><!--登陆按钮--><input type="submit" value="登录" ></form></body></html>结果：input标签：可以通过type属性值，改变元素展⽰的样式label：指定输⼊项的⽂字描述信息， label的for属性⼀般会和 input 的 id属性值 对应。
简述使用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 input 标签的用法
html input 标签的用法HTML（HyperText Markup Language）是一种用于创建网页结构的标记语言，而 input 标签则是 HTML 中最常用的表单元素之一。
在这篇文章中，我们将探讨 HTML input 标签的用法，以及它的不同属性和类型。
1. 基本用法在 HTML 中，input 标签用于创建表单输入字段，它允许用户在网页中输入文本、选择选项或上传文件。
下面是 input 标签的基本用法：```html<input type="text" name="username" placeholder="请输入用户名"> ```在上面的例子中，type 属性被设置为 "text"，这表示创建了一个文本输入框。
name 属性用于标识输入字段，并在提交表单时将其值与用户输入的内容一起发送到服务器。
placeholder 属性用于在输入框中显示灰色的提示文本，告诉用户应该输入什么内容。
2. 输入类型input 标签有多种不同的输入类型，每种类型都有其特定的用途和限制。
下面是一些常见的输入类型：- Text（文本）：用于输入单行文本。
- Password（密码）：用于输入密码，在用户输入时显示为隐藏字符。
- Number（数字）：用于输入数字。
- Email（电子邮件）：用于输入电子邮件地址，并在提交表单时进行验证。
- Checkbox（复选框）：用于选择多个选项。
- Radio（单选按钮）：用于选择一个选项。
- File（文件）：用于上传文件。
以下是一些示例：```html<input type="password" name="password" placeholder="请输入密码"> <input type="number" name="age" min="18" max="99"><input type="email" name="email" required><input type="checkbox" name="interests" value="sports">体育<input type="radio" name="gender" value="male">男<input type="file" name="avatar">```3. 必填属性有时候，我们希望用户必须填写某些表单字段，以确保数据的完整性和准确性。
10款精美而实用的HTML5表单（登录、联系和搜索表单）
10款精美⽽实⽤的HTML5表单（登录、联系和搜索表单）1、HTML5/CSS3仿Facebook登录表单这款纯CSS3发光登录表单更是绚丽多彩。
今天我们要分享⼀款仿Facebook的登录表单，⽆论从外观还是功能上说，这款登录表单还是挺接近Facebook登录表单的。
2、CSS3可折叠显⽰的发光搜索表单这次要分享的⼀款CSS3表单是⼀款可折叠显⽰的发光搜索表单，搜索表单的输⼊框⼀开始由⼀层遮罩遮住的，并且是半透明的状态，当⿏标滑过输⼊框时，遮罩层即可缓缓展开，我们可以在搜索框中输⼊⽂字进⾏搜索。
3、CSS3数字验证表单 3D折叠验证提⽰今天我们要来分享⼀款效果很不错的CSS3数字验证表单，这款表单是⽤来验证输⼊的是否是合法数字的，并能给出相应的提⽰。
更重要的是这款CSS3数字验证表单的提⽰是以3D折叠框的形式，显得⾮常具有创意。
4、⾮常上档次的HTML5/CSS3登录表单今天我们要分享⼀款⾮常上档次的HTML5/CSS3登录表单，这款登录表单有⼀张⽤户的图⽚，输⼊框左侧有漂亮的⼩图标，同时，登录按钮也⾮常漂亮。
5、CSS3实现⼀款联系表单输⼊框带⼩图标今天我们再来分享⼀款外观还不错的CSS3联系表单，这款CSS3联系表单的输⼊框带有⼩图标，并且在提交信息时能校验输⼊的信息。
6、HTML5/CSS3简易联系表单扁平化风格这次要分享的⼀款HTML5/CSS3简易联系表单⾮常清新，整体外观不是那么华丽，但是表单扁平化的风格让⼈看了⾮常舒服，同时利⽤了HTML5元素的特性，表单的验证功能变得也相当简单。
7、CSS3响应式表单可切换表单主题这次要分享的⼀款CSS3响应式表单不仅美化了checkbox和Radiobox，⽽且也⾃定义美化了输⼊框、下拉框以及多项选择框，⼏乎所有的表单元素都美化了，⽽且整体上还不错。
另外，这款CSS3表单还可以切换主题，换⼀下表单风格也是不错的。
8、⾮常个性化的CSS3⾃定义checkbox和radiobox对于浏览器默认的checkbox和Radiobox样式实在是⽐较丑陋了，今天分享⼀款⾮常个性化的CSS3⾃定义checkbox和Radiobox，外观⾮常时尚。
一、（3）HTML表单与表格-综合应用
DTD TF
TF STF STF STF STF STF
</tr> <tr> <td>2.2</td> <td>2.3</td> </tr> </table>
注意事项：列的个数要一致 如果一个格子中没有内容，请尽量使用 （ 空格）补齐
1.3 常见问题 1.如果要完成跨行跨列，先做一个完整的表格。再一步一步的去完成跨行合并或跨列合并操作。 2.结构化后的表格需要去掉结构标签后,再做合并操作 3.注意需要合并的td起始位置,合并完成后必须清除同行或列多出来的td
<p>爱好： <input type="checkbox" name="hobbuy" value="唱歌" checked/>唱歌 <input type="checkbox" name="hobbuy" value="看书"/>看书 <input type="checkbox" name="hobbuy" value="学习"/>学习 <input type="checkbox" name="hobbuy" value="上网"/>上网
其它属性：
placeholder：定义输入框的提示文字 maxlength：设置文本框最多输入多少字符 readonly：只读(不可输入) disabled：禁用(不可输入) -> 不会提交这个表单元素的数据 checked：仅用于 radio/checkbox，作用是设置默认选中项
html中的表单标签及表单元素
html中的表单标签及表单元素1、表单标签<form action="提交地址" method="提交⽅式"></form>表单边框标签：fieldset2、表单元素分为三类：（1）⽂本类型： ⽂本框：text 属性有：disabled（不可操作）、readonly（只读）、placeholder（默认提⽰⽂字）账号：<input type="text"> 密码框：password密码：<input type="password"> 隐藏域：hidden 多⾏⽂本（特殊格式）：textarea<textarea name="" id="" ></textarea>（2）选择类型： 单选：radio 属性有：disabled（不可操作）、checkbox（默认选中的）性别：<input type="radio">男 <input type="radio">⼥ 多选：checkbox爱好：<input type="checkbox">打游戏 <input type="checkbox">看电视 <input type="checkbox">看书 下拉（特殊格式）：select option 属性（option的属性）：selected（默认选中）、multiple（全部显⽰）属性（select的属性）：size（显⽰⼏条）<select name="" id=""><option value="">汉族</option><option value="">满族</option><option value="">壮族</option><option value="">回族</option></select>（3）按钮类型： 普通：button<input type="button" value="点我试试"> 提交：submit <input type="submit" value="提交按钮"> 复位：reset<input type="reset" value="清空">其他：1、autofocus属性（聚焦）实例：2、optgroup定义选项组实例：注意：methon:get传值（键值对，显⽰在⽹页的路径上，路径后⾯加数据）post（⽹络传值) ⼀般都⽤post 格式：<form action="#" method="post" enctype="multipart/form-data"> Html5新增：<input type="color"><br><input type="date"><br><input type="search"><br><input type="week"><br><input type="text" name="" list="list"><datalist id="list"><option value="aaa"></option><option value="vvv"></option><option value="ddd"></option></datalist>。
html表格用法
html表格用法HTML表格用法什么是HTML表格？HTML表格是一种用于展示和组织数据的标记语言。
表格由一个或多个行和列组成，用于在网页上显示数据。
创建表格在HTML中，使用<table>元素来创建表格。
表格由行(<tr>)和单元格(<td>)组成。
下面是创建一个简单表格的代码示例：<table><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr></table>合并单元格有时候我们希望将多个单元格合并成一个，可以使用colspan和rowspan属性来实现。
colspan属性用于跨列合并，rowspan属性用于跨行合并。
<table><tr><td colspan="2">跨两列单元格</td><td>单元格3</td></tr><tr><td>单元格4</td><td rowspan="2">跨两行单元格</td><td>单元格6</td></tr><tr><td>单元格7</td><td>单元格8</td></tr></table>表头和表体在表格中，可以使用<thead>、<tbody>和<tfoot>元素来分组不同部分的内容。
html输入文字作为参数传递的方法
在HTML中，你可以使用表单（form）来传递参数。
以下是一个简单的例子，展示如何使用HTML表单来输入文字并传递给服务器：```html<!DOCTYPE html><html><body><h2>HTML Form</h2><form action="/your-server-endpoint" method="post"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname"><br><input type="submit" value="Submit"></form></body></html>```在这个例子中，用户可以在文本框中输入他们的名字，然后点击"Submit"按钮来提交表单。
当表单被提交时，浏览器会向"/your-server-endpoint"这个URL发送一个POST请求，其中包含了用户输入的名字。
在服务器端，你可以根据"/your-server-endpoint"这个URL来获取这个参数。
具体的方法取决于你使用的服务器端语言。
例如，如果你使用的是Node.js和Express框架，你可以这样做：```javascriptconst express = require('express');const app = express();app.post('/your-server-endpoint', (req, res) => {const fname = req.body.fname;// Do something with fname...});```在这个服务器端的代码中，`req.body.fname`就是用户输入的名字。
html 表单表格模板
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 js 简单表单实例
html js 简单表单实例HTML和JavaScript是网页开发中常用的技术。
在这篇文章中，我们将学习如何使用HTML和JavaScript创建一个简单的表单实例。
表单是网页上用于收集用户输入信息的元素，比如用户名、密码、电子邮件等。
我们将使用HTML中的`<form>`元素以及JavaScript中的事件处理程序来实现这个任务。
首先，让我们创建一个HTML文件，并在其中添加一个表单元素。
在`<body>`标签中，添加以下代码：```html<h1>简单表单实例</h1><form id="myForm"><label for="name">姓名：</label><input type="text" id="name" name="name" required><br><label for="email">电子邮件：</label><input type="email" id="email" name="email" required><br><input type="submit" value="提交"></form>```在上面的代码中，我们创建了一个具有两个文本输入框和一个提交按钮的表单。
每个输入框都有一个唯一的`id`属性和一个`name`属性。
`id`属性用于标识元素，而`name`属性用于在提交表单时识别输入的值。
现在，我们需要使用JavaScript为表单添加事件处理程序。
我们希望当用户点击提交按钮时，执行一个函数来处理表单数据。
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>。
HTML表单模板
HTML表单模板 1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>登录表单</title>6</head>7<body>8<!-- get post 区别 -->9<form method="post" action="地址">10<table border="1px" cellspacing="0" width="600px">11<tbody>12<tr height="40px">13<td rowspan="4" align="center">总体信息</td>14<td colspan="2"></td>1516</tr>17<tr height="40px">1819<td align="right">⽤户名：</td>20<td>21<input type="text" name="username"/>22</td>23</tr>24<tr height="40px">2526<td align="right">密码：</td>27<td>28<input type="password" name="userpasswd">29</td>30</tr>31<tr height="40px">3233<td colspan="2" align="center">34<input type="submit" value="提交"/>35<input type="reset" value="重置"/>36</td>3738</tr>3940</tbody>41</table>42</form>43</body>44</html>。
html表格代码例子
html表格代码例子
下面是一个简单的HTML表格代码示例：html复制代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML 表格示例</title>
</head职业</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</body>
</html>
这个表格包含三行数据，每行有三个单元格。
<thead>元素用于定义表头，<tbody>元素用于定义表格主体。
<tr>元素用于定义表格行，<th>元素用于定义表头单元格，<td>元素用于定义表格数据单元格。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
姓名：<br>
<input type="text" name="name" value="yourname" size="20">
<br>
电邮：<br>
<input type="text" name="mail" value="yourmail" size="20">
<br>
内容：<br>
<br>
Female:
<input type="radio" name="Sex" value="Female">
<br>
<input type ="submit" value ="Submit">
</form>
<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>
</form>
<p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p>
</body>
</html>
简单的下拉列表
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<input type="text" name="comment" value="yourcomment" size="40">
<br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
</body>
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>
</body>
</html>
带有单选按钮的表单
for input,
and your browser does not allow
a textarea inside a textarea.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
创建按钮
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>
Fieldset around data
<html>
<body>
<fieldset>
<legend>健康信息：</legend>
</form>
</body>
</html>
单选按钮
<html>
<body>
<form>
男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</body>
</html>
从表单发送电子邮件
<html>
<body>
<form action="MAILTO:someone@" method="post" enctype="text/plain">
<h3>这个表单会把电子邮件发送到 W3School。</h3>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<html>
<body>
<form name="input" action="/html/html_form_action.asp" method="get">
Male:
<input type="radio" name="Sex" value="Male" checked="checked">
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
文本域(Textarea)
<html>
<body>
<p>
This example cannot be edited
because our editor uses a textarea
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
</body>
</html>
带有复选框的表单
<html>
<body>
<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
html-表单例子.txt性格本身没有好坏，乐观和悲观对这个世界都有贡献，前者发明了飞机，后者发明了降落伞。更多实例
复选框
<html>
<body>
<form>
我喜欢自行车：
<input type="checkbox" name="Bike">
<br>
我喜欢汽车：
<input type="checkbox" name="Car">