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

最新推荐文章于 2022-08-07 13:50:32 发布

怅然入梦

最新推荐文章于 2022-08-07 13:50:32 发布

阅读量875

点赞数

分类专栏： HTML5开发学习 HTML基础文章标签： html web app

本文链接：https://blog.csdn.net/anig2014/article/details/44916919

版权

HTML5开发学习同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML基础

12 篇文章 2 订阅

订阅专栏

这章学习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>

运行结果: