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

这章学习3种简单列表----普通列表,下拉列表,多选列表和多行文本框, 也是直接贴代码

代码示例:

<!DOCTYPE html>
<html>
  <head>
    <title>FormApplication2.html</title>

	<meta charset="utf-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <body>
  <a href="FormApplication.html">返回上页</a>
  	<table border="1" width="500" alight="center">
  		<tr>
  			<th>下拉列表</th>
  			<td>
  				<select name="list">
  					<option>--请选择--</option>
  					<option>北京</option>
  					<option>上海</option>
  					<option>广东</option>
  					<option selected="selected">河南</option> <span style="white-space: pre">   </span> <!-- 默认选项 -->
  					<option>天津</option>
  				</select>
  			</td>
  		</tr>

  		<tr>
  			<th>普通列表</th>
  			<td>
  				<select name="list1" size="4"><span style="white-space: pre">    </span><!-- 下拉长度为4 -->
  					<option>--请选择--</option>
  					<option>郑州</option>
  					<option>新乡</option>
  					<option>洛阳</option>
  					<option>开封</option>
  					<option>周口</option>
  					<option>安阳</option>
  				</select>
  			</td>
  		</tr>

  		<tr>
  			<th>多选列表</th>
  			<td>
  				<select name="list2" multiple="multiple"> <!-- multiple表示为多选列表 -->
  					<span style="white-space: pre">    </span>
  					<option>--请选择--</option>
  					<option>海淀区</option>
  					<option>朝阳区</option>
  					<option>东城区</option>
  					<option>西城区</option>
  					<option>丰台区</option>
  					<option>昌平区</option>
  				</select>
  			</td>
  		</tr>

  		<tr>
  			<th>多行文本域</th>
  			<td>
  				<textarea rows="10" cols="20" name="message">输入内容</textarea>
  			</td>
  		</tr>
  	</table>
  </body>
</html>

运行结果:

时间: 2024-10-10 10:27:20

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

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

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

表单(二)多个表单项的动态校验总结

任务目的 加强对JavaScript的掌握 熟悉常用表单处理逻辑 任务描述 如示例图中所示,基于上一个任务,在页面中添加多个表单 要求: 表单获得焦点时,下方显示表单填写规则 表单失去焦点时校验表单内容 校验结果正确时,表单边框显示绿色,并在下方显示验证通过的描述文字 校验结果错误时,表单边框显示红色,并在下方显示验证错误的描述文字 点击提交按钮时,对页面中所有输入进行校验,校验结果显示方式同上.若所有表单校验通过,弹窗显示"提交成功",否则显示"提交失败" 任务注

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 /> <

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

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

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

HTML5学习之智能表单(二)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form

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

表单提交(二)

二.用input type="button"方式提交表单 该方法提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用.所以可以在onclick事件里面进行表单校验. 如果换成jquery方式,$("#myForm").submit()会调用onsubmit事件. <!DOCTYPE html> <html> <head> <script type="text/javas