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:在框架中某个区域显示内容。

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>