从零开始学HTML&&CSS&&JavaScript（三）——HTML5原有的表单以及表单控件（2）

最新推荐文章于 2020-05-23 22:36:31 发布

学号Java

最新推荐文章于 2020-05-23 22:36:31 发布

阅读量327

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_42147171/article/details/104643767

版权

前端基础专栏收录该内容

28 篇文章 0 订阅

订阅专栏

HTML5原有的表单以及表单控件

1.列表框和下拉菜单
2.textarea属性

1.列表框和下拉菜单

列表框和下拉菜单基本元素和代码如下：

<selc...>.元素用于创建列表框或下拉菜单，该元素必须和0<pio...>元素结合使用，每
个optio...>元素代表-一个列表项或菜单项。
与其他表单控件不同的是，<select..> 元素本身并不能指定value属性，列表框或下拉菜
单控件对应的参数值由rpin..>元素来生成，当用户选中了多个列表项或菜单项后，这些
列表项或菜单项的value值将作为该<scle...>元素所对应的请求参数值。
<elec...>元素 可以指定id、style. class 等核心属性，该元素仅可以指定onchange 事件
属性一当该列表框或 下拉列表项内的选中选项发生改变时,触发onchange事件。除此之外，
<ele..>.元素还可以指定如下几个属性。
➢disabled: 设置禁用该列表框和下拉菜单，该属性的值只能是disabled或省略属性值。
➢multiple: 设置该列表框和下拉菜单是否允许多选，该属性的值只能是multiple, 即
表示允许多选。一旦设置允许多选，<sele...>元 素就会自动生成列表框。
➢size: 指定该列表框内可同时显示多少个列表项。- -旦指定该属性，<selec..>元
素就会自动生成列表框。
在<elc+../>元素里，只能包含如下两种子元素。
➢<option>: 用于定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项
的文本。
➢<optgroup.../>: 用于定义列表项或菜单项组。该元素里只能包含<optio.../>子元素，
处于<optgrop..>里的opin...>就属于该组。
<optin...>元素可以指定id、style、 class 等核心属性，还可以指定onclick 等事件响应属
性。除此之外，还可以指定如下几个属性。
➢disabled: 指定禁用该选项，该属性的值只能是disabled.
➢selected: 指定该列表项初始状态是否处于被选中状态。该属性的值只能是
selected。
➢value: 指定该选项对应的请求参数值。
<optgroup...>元素可以指定id、style、 class 等核心属性，还可以指定onclick 等事件响应
属性。除此之外，还可以指定如下两个属性。
➢label: 指定该选项组的标签。这个属性必填。
➢disabled: 设置禁用该选项组里的所有选项。该属性值只能是disabled或省略该属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.crazyit.org" method="post">
			下面是简单下拉菜单: <br />
			<select id="skills" name="skills">
			<option value="java">Java 语言</option>
			<option value-"c">C 语言</option>
			<option value=" ruby">Ruby语言</option>
			</select><br /><br /><br />
			下面是允许多选的列表框: <br />
			<select id= "books" name="books"
			multiple ="multiple" size ="4">
			<option value="java">疯狂 Java讲义</option>
			<option value="android">疯狂Android讲义</option>
			<option value="ee">轻量级Java EE 企业应用实战</option>
			</select><br />
			下面是允许多选的列表框: <br />
			<select id="leegang" name="leegang"
			multiple= ="multiple" size="6">
			<optgroup label=" 疯狂Java体系图书">
			<option value="java" label="aaaaaaa">疯狂Java讲义</option>
			<option value= "android">疯狂Android讲义</ option>
			<option value="ee">轻量级Java EE企业应用实战</ option>
			</ optgroup>
			<optgroup label="其他图书">
			<option value="struts">Struts 2.1 权威指南</option>
			<option value= "ror">RoR敏捷开发最佳实践</option>
			</optgroup>
			</select><br/>
			<button type="submit"><b>提交</b></button><br/>
			</ form>

	</body>
</html>

注意：多选时按住CTRL键

在页面上的运行效果如下：
在这里插入图片描述

2.textarea属性

代码如下：

➢cols: 指定文本域的宽度，该属性必填。
➢rows:指定文本域的高度，该属性必填。
➢disabled: 指定禁用该文本域。该属性值只能是disabled, 当此文本域首次加载时
禁用此文本域。
➢readonly:指定该文本域只读。该属性值只能是readonly。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="http://www. crazyit.org" method="post">
		简单多行文本域: <br />
		<textarea cols="20" rows="2"></textarea><br/>
		只读的多行文本城: <br />
		<textarea cols="28" rows="4" readonly="readonly">
疯狂Java讲义
轻量级Java EE企业应用实战
		</textarea><br />
		<button type="submit"><b> 提交</b></button><br />
		</ form>
	</body>
</html>