HTML高级标签(3)————表单的应用

在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属性就不多讲了。

看看执行后的样子:

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

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

时间: 2024-10-11 11:58:09

HTML高级标签(3)————表单的应用的相关文章

HTML高级标签之表单应用(二)

这章学习3种简单列表----普通列表,下拉列表,多选列表和多行文本框, 也是直接贴代码 代码示例: <!DOCTYPE html> <html> <head> <title>FormApplication2.html</title> <meta charset="utf-8"> <meta name="keywords" content="keyword1,keyword2,ke

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

A FORM <form id='form' action='http://a-response-url' method="post"> <!--maxlength 最大值 placeholder 占位符 autofocus 自动聚焦--> <input type='text' name='name' size='20' maxlength='10' placeholder='initial' autofocus /><br /> <

Html5之高级-2 HTML5表单属性(属性介绍、属性详解)

一.属性介绍 属性介绍 - 有一些输入类型要求使用特定的属性才能显示效果,如前面提到过min,max,step. 其他输入类型需要使用一些属性来改进其他性能,或者决定验证过程的重要性.HTML5 标准中再原来的基础上增加了一些新的属性. - Placeholder 属性 - Nultiple 属性 - Autofocus 属性 - Form 属性 二.属性详解 Placeholder 属性 - Placeholder 属性通常用于search输入类型,也可以用在文本域.它表示一个简单提示.单词或

Struts2中UI标签之表单标签介绍

1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.checkboxlist.select.doubleselect.combobox.optiontransferselect.optgroup.updownselect.textarea.hidden.file.label.submit.token.head.datepicker.reset.richte

HTML &lt;fieldset&gt; 标签将表单内的相关元素分组

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界.3D 效果,或者甚至可创建一个子表单来处理这些元素. <fieldset> 标签没有必需的或唯一的属性. <legend> 标签为 fieldset 元素定义标题. HTML 4.01 与 HTML 5 之间的差异 HTML5 拥有如下属性:disabled.form.name,H

Struts2中UI标签之表单标签的一个例子

1.最近写了一篇文章,介绍了一下Struts2中UI标签的表单标签,文章地址为:http://blog.csdn.net/u012561176/article/details/44986183  因为缺少了个例子,大家看文字和表格也看不出什么效果来,所以今天来介绍一个例子,用Struts2中UI标签的表单标签实现一个个人信息的表单,但是有些表单标签没有演示出来,大家可以根据我介绍UI标签的表单标签来进行学习,这里只是给个例子. 2.首先新建一个Struts2项目,项目名为PersonMess

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

前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签是一个文本标签,本身是一个块级标签不能再嵌套块标签 div 标签: 没有样式的标签 ,最常用 列表 ???????1.无序列表 常用 ??????2.有序列表 ??????3.标题列表 # 无序列表 circle:空心圆, disc:默认实心圆,square:实心方片 <ul type='circl

MVC5高级编程_表单和html辅助方法

使用HTML辅助方法关键在于 确保HTML页面链接中的URL指向正确的位置.表单元素拥有适用于模型绑定的合适名称和值,以及当模型 绑定失败时其他元素能够显示相应的错误提示消息. 1.表单的使用     @using(Html.BeginForm("Searhch", "Home", FormMethod.Get,new { target = "_blank", @class="editForm", data-validatab

html新的语义化标签和表单控件

语义化标签 1 <!DOCTYPE html> 2 <html> 3 <head lang="zh-cn"> 4 <meta charset="UTF-8"> 5 <title>新增的语义化标签</title> 6 </head> 7 <body> 8 <header>页面头部或某个板块的头部</header> 9 <footer>页面

form标签输出表单

表单标签是Struts2标签库的核心,用于输入数据.提交数据.form标签通常用于生成HTML里的<form>标签. <struts:form>标签不仅生成<form>标记,还会生成<table>标记.<struts:label>.<struts:textfield>.<struts:textarea>等UI标签也会生成<tr><td>标记.因此JSP中不需要书写任何布局代码. 1 <stru