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

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或省略该属性值


<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 />
			
			<optgroup label=" 疯狂Java体系图书">
			<option value="java" label="aaaaaaa">疯狂Java讲义option>
			

注意:多选时按住CTRL键

在页面上的运行效果如下:
从零开始学HTML&&CSS&&JavaScript(三)——HTML5原有的表单以及表单控件(2)_第1张图片

2.textarea属性

代码如下:

➢cols: 指定文本域的宽度,该属性必填。
➢rows:指定文本域的高度,该属性必填。
➢disabled: 指定禁用该文本域。该属性值只能是disabled, 当此文本域首次加载时
禁用此文本域。
➢readonly:指定该文本域只读。该属性值只能是readonly。

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

在页面上的运行结果如下:
从零开始学HTML&&CSS&&JavaScript(三)——HTML5原有的表单以及表单控件(2)_第2张图片

你可能感兴趣的:(前端基础)