在HTML开发中，标签的种类和数量非常多，不可能说每一种都研究透。非常多能够用CSS来控制的标签，我们基本没有必要在上面浪费时间。所以，我们仅仅要掌握在HTML开发中比較经常使用的标签就全然能够了。

首先，先写一个最简单的登录表单。

<html>

	<head>

		<title>表单的应用</title>

	</head>

	<body>

		<table border="1" width="500" align="center">

		<form name="frm" action="login.php">

			<caption>表单的应用</caption>

			<tr>

					<th>文本域(<u>U</u>)</th>

					<td>

							<input type="text" name="username" value="username">

					</td>

			</tr>

			<tr>

					<th>密码域</th>

					<td>

							<input type="password" name="password" value="password">

					</td>

			</tr>

<span style="white-space:pre">			</span><tr>
<span style="white-space:pre">					</span><td colspan="2" align="center">
<span style="white-space:pre">							</span><input type="submit" name="sub">
<span style="white-space:pre">							</span><input type="reset">
<span style="white-space:pre">							</span><input type="image" src="ucai.png"><span style="white-space:pre">	</span><!--这是加入相对路径的一张照片-->
<span style="white-space:pre">					</span></td>
<span style="white-space:pre">			</span></tr>
<span style="white-space:pre">		</span></form>
<span style="white-space:pre">		</span></table>
<span style="white-space:pre">	</span></body>
</html>

这是程序执行后的结果：（图片仅仅是我任意截取的一个logo，绝不是打广告）

一个简单的表单就完毕了，注意<form>标签应该放在<table>里面，加入其它字段元素时，也应该遵循这个方式。

接下来，再加入一个单选框和复选框。

			<tr>

					<th>复选框</th>

					<td>

							game<input type="checkbox">

							movie<input type="checkbox">

							travel<input type="checkbox">

							reading<input type="checkbox">

							writing<input type="checkbox">

					</td>

			</tr>

			<tr>

					<th>单选框</th>

					<td>

							<input type="radio" name="sex" checked>boy

							<input type="radio" name="sex">girl

							<input type="radio" name="sex">secret

					</td>

			</tr>

复选框的type="checkbox",单选框的type="radio".

然而，复选框可一所有选择，也能够都不选择。单选框则必须有一个选择的，所以要加上一个默认项，也就在后面加入一个checked。还有，单选框中的选项都是以相互排斥的方式存在的，所有将他们相当于放在一个数组中一样，也就是命名都一样的话，就能够保证他们的相互排斥性。要不然，就一个都选不了。

这是执行后的结果：

表单中少不了的肯定有列表，以下再介绍几种经常使用的列表：普通列表，下拉列表，多选列表。

					<th>下拉列表</th>

					<td>

							<select name="list">

									<option>--请选择--</option>

									<option>111111</option>

									<option selected>222222</option><span style="white-space:pre">	</span><!--默认选项-->

									<option>333333</option>

									<option>444444</option>

									<option>555555</option>

									<option>666666</option>

									<option>777777</option>

									<option>888888</option>

							</select>

					</td>

			</tr>

			<tr>

					<th>普通列表</th>

					<td>

							<select name="list1" size="4"><span style="white-space:pre">		</span><!--下拉长度为4-->

									<option>--请选择--</option>

									<option>111111</option>

									<option>222222</option>

									<option>333333</option>

									<option>444444</option>

									<option>555555</option>

									<option>666666</option>

									<option>777777</option>

									<option>888888</option>

							</select>

					</td>

			</tr>

			<tr>

					<th>多选列表</th>

					<td>

							<select name="list2" multiple><span style="white-space:pre">		</span><!--multiple表示为多选列表-->

									<option>--请选择--</option>

									<option>111111</option>

									<option>222222</option>

									<option>333333</option>

									<option>444444</option>

									<option>555555</option>

									<option>666666</option>

									<option>777777</option>

									<option>888888</option>

							</select>

					</td>

			</tr>

标签的内外关系不要搞混了。

执行结果：

最后，再写一个多行文本域。在非常多须要描写叙述的地方，多行文本域就派上用场了。

			<tr>

					<th>多行文本域</th>

					<td>

							<textarea cols="20" rows="10" name="message">typing your message here</textarea>

					</td>

			</tr>

就是非常easy，一个<testarea></textarea>搞定了。cols和rows属性就不多讲了。

看看执行后的样子：

字数超过文本框大小时，会自己主动加入滚动栏。

好了，经常使用的也就是这些了，大家共同学习进步。

HTML高级标签（3）————表单的应用的更多相关文章

  1. 制作Html标签以及表单、表格内容

    制作Html一般用DW(......),Html全称为(Hyper Text Markup Language   超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...

  2. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  3. 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明：来源于网络]

    第二天(就业班) html的引入.html常用标签.实体标签.超链接标签.图片标签.表格.框架标签.表单[申明:来源于网络] 第二天(就业班) html的引入.html常用标签.实体标签.超链接标签. ...

  4. <form> 标签 // HTML 表单 // from 表单转换成json 格式

    <form> 标签   // HTML 表单    // from 表单转换成json 格式 form 表单,对开发人员来说是在熟悉不过的了,它是页面与web服务器交互时的重要信息来源 表 ...

  5. 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

    前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...

  6. HTML的一些标签以及表单

    HTML的一些标签以及表单 图片标签 属性 说明 src 图像的路径 alt 图像不能显示时的替换文字 title 鼠标悬停时显示的内容 border 设置图像边框的宽度 align 对齐方式 相对路 ...

  7. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  9. JavaScript高级程序设计之表单基础

    A FORM <form id='form' action='http://a-response-url' method="post"> <!--maxlengt ...

  10. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

随机推荐

  1. 解决WIN7远程登录提示无法保存凭据的问题

    事由:今天到公司,想起手上还有点小东西没有改动完,就打算连上server进行小改动.结果发现昨天还能好好的远程连接server的WIN7,今天突然间不能远程登录了~ 无奈~悲催~ 我仅仅能猜是不是有什 ...

  2. Maven实战（八）---模块划分

    为了防止传递依赖,我们各个模块之间尽量用直接依赖的方式.本篇文章介绍多模块化开发.我们做过Maven项目的都知道.我们的项目一般都是分模块的,每一个模块都会相应着一个POM.xml文件,它们之间通过继 ...

  3. 20160227.CCPP体系具体解释(0037天)

    程序片段(01):01.一对一模式.c+02.中介者模式.c+03.广播模式.c 内容概要:事件 ///01.一对一模式.c #include <stdio.h> #include < ...

  4. JAVA 并发编程-线程范围内共享变量（五）

    线程范围内共享变量要实现的效果为: 多个对象间共享同一线程内的变量 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsi ...

  5. 如何使用jquery判断一个元素是否含有一个指定的类（class）

    如何使用jquery判断一个元素是否含有一个指定的类(class) 一.总结 一句话总结:可以用hasClass方法(专用)和is方法 1.is(expr|obj|ele|fn)的方法几个参数表示什么 ...

  6. es8 --- 新特性

    ES8尚未发布(2017年1月),下面是它已经完成起草的一些特性: Object.values() Object.entries() padStart() padEnd() Object.getOwn ...

  7. 高阶函数sort

    排序中我们经常会用sort这个高阶函数,我们今天就来讲讲这个sort的比较机制,对于数字来说我们只需要比较他们的大小就可以了 但是 var arr =[15,81,9,4,3]; alert(arr. ...

  8. BZOJ4712: 洪水(树链剖分维护Dp)

    Description 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开了创造模式,然后飞到 山顶放了格水.于是小A面前出现了一个瀑布.作为平民的小A只好老实巴交地 ...

  9. Spring模块作用

    0.模块整理 Spring模块整理(http://www.kuqin.com/shuoit/20150805/347434.html) 模块名 作用 资料 aop  spring的面向切面编程,提供A ...

  10. mapper.xml中的常用标签

    mybatis的mapper xml文件中的常用标签 https://blog.csdn.net/qq_41426442/article/details/79663467 SQL语句标签 1.查询语句 ...