表单元素之output元素、度量条、进度条、fieldset、legend元素

最新推荐文章于 2023-11-04 08:00:00 发布

yin_991

最新推荐文章于 2023-11-04 08:00:00 发布

阅读量516

点赞数

文章标签： html5 表单

本文链接：https://blog.youkuaiyun.com/yin_991/article/details/78380610

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>output元素、度量条、进度条、fieldset、legend元素</title>
</head>
<body>
	<fieldset>
		<legend>output元素</legend>
		<form action="" id="form" οninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
		<input type="number" name="num1">+
		<input type="number" name="num2">=
		<output name="num" for="num1 num2" form="form"></output>
	</form>
	</fieldset>
	
	<fieldset>
		<legend>进度条</legend>
		<form action="">
		<progress max="10" value="2"></progress>
		</form>
	</fieldset>
		
	<fieldset>
		<legend>度量条</legend>
		<form action="">
			<meter value="60" max="100" low="30" high="90"></meter><br>
			<meter value="80" max="100" low="30" high="90"></meter><br>
			<meter value="70" max="100" low="30" high="90" optimum="70"></meter>
	</form>
	</fieldset>
	
</body>
</html>