码迷,mamicode.com
首页 > 其他好文 > 详细

10、表单元素(下)

时间:2017-02-20 14:10:27      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:html 表单元素

一、其他元素

表单元素还有select、多行文本框textarea和output计算结果元素

    元素名称                              说明
select生成一个下拉列表进行选择
optgroup对select元素进行编组
optionselect元素中的项目
textarea生成一个多行文本框
output表示计算结果

1、生成下拉列表

<select name="fruit">
    <option value=1>苹果</option>
    <option value=2>香蕉</option>
    <option value=3>橘子</option>
</select>

解释:<select>下拉列表元素至少包含一个<option>子元素,才能形成有效的选项列表。<select>元素包含两个子元素<option>项目元素和<optgroup>分组元素,还包含了一些额外的属性

   属性名称                          说明
name设定提交时的名称
disable将下拉列表禁用
form将表单外的下拉列表与某个表单挂钩
size设置下拉列表的高度
multiple设置是否可以多选
autofocus获取焦点
required选择验证,设置后必须选择才能通过

//设置高度并实现多选

<select name="fruit" size="30 multiple">


//设置首选

<option value="2" selected>橘子</option>


//使用optgroup进行分组,lable为分组名称,disable可以禁用分组

<select>
    <optgroup label="水果类">
	<option value="1">苹果</option>
	<option value="2" selected>橘子</option>
	<option value="3" lable=“香蕉”>香蕉</option>
	</optgroup>
    <optgroup label="粗粮类">
	<option value="4">小米</option>
	<option value="5">大米</option>
	<option value="6" lable=“玉米”玉米</option>
    </optgroup>
</select>


2、多行文本

<textarea name="content">请留下您的建议!</textarea>

解释:生成一个可以变更大小的多行文本框,属性如下:

    属性名称                                           说明
name设定提交时的名称
form

将表单外的多行文本框与某个表单挂钩

readonly设置多行文本框只读
disable将多行文本框禁用
maxlength设置最大可以输入的字符长度
autofocus获取焦点
placeholder设置输入时的提示信息
rows设置行数
cols设置列数
wrap设置是否插入换行符,有soft和hard两种
required设置必须输入值,否则无法通过验证


3、计算结果

<form oninput="res.value=num1.valueAsNumber * num2.valueAsNumber">

    <input type="number" id="num1">x<input type="number" id="num2">

     <ouput for="num1 num2" name="res">

</form>

解释:output就是计算两个文本框之间的值,其实就是内嵌了JavaScript功能。

将num1的值乘以num2,然后提交给<form标签中的oninput。


二、输入验证

HTML5对表单提供了输入验证检查方式,但这种验证还是比较简陋的,并且不同的浏览器支持的成熟度还不同,在大部分情况下,可能还是要借助jQuery等前端库来数显丰富的验证功和显示效果

//必须写一个值

<input type="text" required>


//限定在某一个范围内

<input type="number" min="10" max="100" >


//使用正则表达式

<input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">


//禁止表单验证

<form action="http://baidu.com novalidate ">






本文出自 “zengestudy” 博客,请务必保留此出处http://zengestudy.blog.51cto.com/1702365/1899428

10、表单元素(下)

标签:html 表单元素

原文地址:http://zengestudy.blog.51cto.com/1702365/1899428

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!