value:指定该选项被选中时对应的值。 (3)< optgroup>元素可以指定ID、 style、 class等属性,还可 以指定 onclick等事件属性, optgroup>元素的其他属性有: lable:指定该选项组的标签,此属性为必须填写的项目。 diabled:指定该选项组禁止使用。 案例 例7-4:列表框与下拉菜单 html> <head> <meta charset="utf-8> <title>select</title> <h1>用户注册</h1> <p>账号名称:< input type="text"name=" UserName"widh="30> <p>账号口令:< input type=" password"name=" UserPWD"wdth="30"> <p>重复口令:< Input type=" password"name=" ReUserPWD"wdth="30"> <p>所在地区 <select name="Area" size=2"> < optgroup label="-中国-" < option value=" BeiJing">北京< option> < option value=" ShangHai">上海< option> < option value=" Guangzho">广州< option < option va|ue=" HeNan">河南< option> < option value=" HeBei>河北< option> </optgroup> < optgroup label="-世界 < option value=" Yanzhou">亚洲< option> < option value=" Feizhou"→>非洲< option> ption value=" Meizhou">美洲< option> <p>< input type=" submit"name=" Submit' value="进行注册"> </html> 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
6 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn value：指定该选项被选中时对应的值。 （3）<optgroup>元素可以指定 ID、style、class 等属性，还可 以指定 onclick 等事件属性。 <optgroup>元素的其他属性有： lable：指定该选项组的标签，此属性为必须填写的项目。 diabled：指定该选项组禁止使用。 案例： 示例 7-4：列表框与下拉菜单 <!doctype html> <html> <head> <meta charset="utf-8"> <title>select</title> </head> <body> <form> <h1>用户注册</h1> <p>账号名称：<input type="text" name="UserName" width="30"> <p>账号口令：<input type="password" name="UserPWD" width="30"> <p>重复口令：<input type="password" name="ReUserPWD" width="30"> <p>所在地区： <select name="Area" size="2"> <optgroup label="--------中国--------"> <option value="BeiJing">北京</option> <option value="ShangHai">上海</option> <option value="GuangZhou">广州</option> <option value="HeNan">河南</option> <option value="HeBei">河北</option> </optgroup> <optgroup label="--------世界--------"> <option value="YanZhou">亚洲</option> <option value="FeiZhou">非洲</option> <option value="MeiZhou">美洲</option> </optgroup> </select> <p><input type="submit" name="Submit" value="进行注册"> </form> </body> </html>
1.5文本区域 元素介绍: textarea元素用于生成多行文本框 主要属性: (1)< textarea>元素可以指定ID、 style、 class等元素,还可 以指定 onclick等事件属性, (2)cols:指定文本域的宽度,此属性为必须填写的项目。 (3)rows:指定文本域的高度,此属性为必须填写的项目。 (4) disabled:指定该元素禁止使用。 (5) readonly:指定该元素为只读状态 案例: 示例7-5:文本框 <!doctype htms <html> <meta charset="utf-8> <title>textarea</title> <form> <p>新闻标题:< Input type="text"name=" News Title"syle=" width:370px"> <p>新闻内容:< textarea name=" News Conten"cols="50°rows="10">请在此 输入新闻内容,不得少于80个字。</ textarea> p>发布说明:< textarea name=" News Publnfo"cols="50°rows="2 eadonly>请认真填写新闻内容,不要进行强制排版。感谢您的支持。此文本 框为只读属性。</ textarea> <p>< nput type=" submit" value="发布新闻"> </html> 二、 input 表单中最重要的元素是 Input。该元素通过使用type属性,可 以改变元素的性质。 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ os. 51xueweb cn
7 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 1.5 文本区域 元素介绍： textarea 元素用于生成多行文本框。 主要属性： （1）<textarea>元素可以指定 ID、style、class 等元素，还可 以指定 onclick 等事件属性。 （2）cols：指定文本域的宽度，此属性为必须填写的项目。 （3）rows：指定文本域的高度，此属性为必须填写的项目。 （4）disabled：指定该元素禁止使用。 （5）readonly：指定该元素为只读状态。 案例： 示例 7-5：文本框 <!doctype html> <html> <head> <meta charset="utf-8"> <title>textarea</title> </head> <body> <form> <p>新闻标题：<input type="text" name="NewsTitle" style="width:370px;"> <p>新闻内容：<textarea name="NewsContent" cols="50" rows="10">请在此 输入新闻内容，不得少于 80 个字。</textarea> <p> 发布说明： <textarea name="NewsPubInfo" cols="50" rows="2" readonly>请认真填写新闻内容，不要进行强制排版。感谢您的支持。此文本 框为只读属性。</textarea> <p><input type="submit" value="发布新闻"> </form> </body> </html> 二、input 表单中最重要的元素是 input。该元素通过使用 type 属性，可 以改变元素的性质
在HTML5中,大幅度的增加和改良了 input元素的种类,并且 可以通过新增的这些种类,实现常用的需要 JavaScript才能够实现 的功能。 本部分主要介绍 input元素的各种类型 2. linput的属性 表7-1 input的属性 属性 属性值 描述 规定可通过文件上传控件提交的文件类型。 ist_of_mime_types(仅适用于seme alt 规定图像输入控件的替代文本。 (仅适用于type="mage") 规定是否使用输入字段的自动完成功能 规定输入字段在页面加载时是否获得焦点 autofocus autofocus (不适用于type=" hidden") 规定当页面加载时是否预先选择该 input元素 checked checked (适用于type=" checkbox"或type=" radio") 规定当页面加载时是否禁用该 input元素 disabled (不适用于type=" hidden") form formname 规定输入字段所属的一个或多个表单。 覆盖表单的 action属性 formation (适用于tvpe=" 'submit"和type=" image") 覆盖表单的 enctype属性 见注释 (适用于type=" submit"和type=" Image") 覆盖表单的 method属性。 formmethod (适用于type=" submit"和tpe=" Image") 覆盖表单的 novalidate属性。 formnovalidate 如果使用该属性,则提交表单时不进行验证 覆盖表单的 target属性。 formtarget (适用于tvpe=" 'submit"和type=" image") height 定义 input字段的高度。(适用于type" image") datalist-id 引用包含输入字段的预定义选项的 datalist。 number 规定输入字段的最大值。 max 请与"min"属性配合使用,来创建合法值的范围 number 规定文本字段中允许的最大字符数 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
8 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 在 HTML 5 中，大幅度的增加和改良了 input 元素的种类，并且 可以通过新增的这些种类，实现常用的需要 JavaScript 才能够实现 的功能。 本部分主要介绍 input 元素的各种类型。 2.1input 的属性 表 7-1 input 的属性 属性 属性值 描述 accept list_of_mime_types 规定可通过文件上传控件提交的文件类型。 （仅适用于 type="file"） alt text 规定图像输入控件的替代文本。 （仅适用于 type="image"） autocomplete on off 规定是否使用输入字段的自动完成功能。 autofocus autofocus 规定输入字段在页面加载时是否获得焦点。 （不适用于 type="hidden"） checked checked 规定当页面加载时是否预先选择该 input 元素。 （适用于 type="checkbox" 或 type="radio"） disabled disabled 规定当页面加载时是否禁用该 input 元素。 （不适用于 type="hidden"） form formname 规定输入字段所属的一个或多个表单。 formaction URL 覆盖表单的 action 属性。 （适用于 type="submit" 和 type="image"） formenctype 见注释 覆盖表单的 enctype 属性。 （适用于 type="submit" 和 type="image"） formmethod get post 覆盖表单的 method 属性。 （适用于 type="submit" 和 type="image"） formnovalidate formnovalidate 覆盖表单的 novalidate 属性。 如果使用该属性，则提交表单时不进行验证。 formtarget _blank _self _parent _top framename 覆盖表单的 target 属性。 （适用于 type="submit" 和 type="image"） height pixels % 定义 input 字段的高度。（适用于 type="image"） list datalist-id 引用包含输入字段的预定义选项的 datalist 。 max number date 规定输入字段的最大值。 请与 "min" 属性配合使用，来创建合法值的范围。 maxlength number 规定文本字段中允许的最大字符数
number 规定输入字段的最小值 min 请与"max"属性配合使用,来创建合法值的范围 multiple 如果使用该属性,则允许一个以上的值 规定 input元素的名称 name name name属性用于在提交表单时搜集字段的值。 规定输入字段的值的模式或格式。 pattern regexp_ pattern 例如 pattern="o-9]"表示输入值必须是0与9之间的数字 anode 规定帮助用户填写输入字段的提示, readonly readonly 指示字段的值无法修改。 equired equir 指示输入字段的值是必需的 number of char 规定输入字段中的可见字符数 RL 规定图像的URL。(适用于type=" Image") number 规定输入字的的合法数字间隔 datetime datetime-local month typ 规定 input元素的类型 radio submit 对于按钮:规定按钮上的文本 对于图像按钮:传递到脚本的字段的符号结果 对于复选框和单选按钮:定义 input元素被点击时的结果 对于隐藏、密码和文本字段:规定元素的默认值 注释:不能与tpe"fl"一同使用 注释:对于type=" checkbox"以及type=" radio",是必需的 定义 input字段的宽度。(适用于type="mage") 9《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
9 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn min number date 规定输入字段的最小值。 请与 "max" 属性配合使用，来创建合法值的范围。 multiple multiple 如果使用该属性，则允许一个以上的值。 name field_name 规定 input 元素的名称。 name 属性用于在提交表单时搜集字段的值。 pattern regexp_pattern 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 placeholder text 规定帮助用户填写输入字段的提示。 readonly readonly 指示字段的值无法修改。 required required 指示输入字段的值是必需的。 size number_of_char 规定输入字段中的可见字符数。 src URL 规定图像的 URL。（适用于 type="image"） step number 规定输入字的的合法数字间隔。 type button checkbox date datetime datetime-local email file hidden image month number password radio range reset submit text time url week 规定 input 元素的类型。 value value 对于按钮：规定按钮上的文本 对于图像按钮：传递到脚本的字段的符号结果 对于复选框和单选按钮：定义 input 元素被点击时的结果。 对于隐藏、密码和文本字段：规定元素的默认值。 注释：不能与 type="file" 一同使用。 注释：对于 type="checkbox" 以及 type="radio"，是必需的。 width pixels % 定义 input 字段的宽度。（适用于 type="image"）
2.2电子邮件类型 元素介绍: 在HTML4中,如果需要输入电子邮件地址,只能够使用text类 型。HIML5中新增加电子邮件类型。浏览器会自动检验输入的内容 是否为合法的电子邮件地址,如果不能够通过验证,则表单就不会发 送。 案例: 示例7-6:电子邮件类型 <!doctype htmI> <meta charset="utf-8 ≮te。电子邮件类型<te </head <form action="form. php"method="post"name="Fome Demo"> p>请输入电子邮件地址:< nput type="emai"name=" Addressemail"> <p><input type="submit"value="W"name="Form Submit"> </form> </body> </html> 2.3URL类型 元素介绍 URL类型和emai1类型相同,但是主要是针对于输入网址。该类 型只接受绝对URL,如果输入无效的URL,会提示错误 案例: 示例7-7:URL类型 <!doctype htm> <html> <head <meta charset="utf-8 tte>URL类型</tte bod 10《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
10 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 2.2 电子邮件类型 元素介绍： 在 HTML 4 中，如果需要输入电子邮件地址，只能够使用 text 类 型。HTML 5 中新增加电子邮件类型。浏览器会自动检验输入的内容 是否为合法的电子邮件地址，如果不能够通过验证，则表单就不会发 送。 案例： 示例 7-6：电子邮件类型 <!doctype html> <html> <head> <meta charset="utf-8"> <title>电子邮件类型</title> </head> <body> <form action="form.php" method="post" name="FomeDemo"> <p>请输入电子邮件地址：<input type="email" name="AddressEmail"> <p><input type="submit" value="确定" name="FormSubmit"> </form> </body> </html> 2.3URL 类型 元素介绍： URL 类型和 email 类型相同，但是主要是针对于输入网址。该类 型只接受绝对 URL，如果输入无效的 URL，会提示错误。 案例： 示例 7-7：URL 类型 <!doctype html> <html> <head> <meta charset="utf-8"> <title>URL 类型</title> </head> <body>