form表单的属性及HTML5新特性列举

最新推荐文章于 2019-05-02 09:38:07 发布

mr_tangshuai

最新推荐文章于 2019-05-02 09:38:07 发布

阅读量551

点赞数

分类专栏： html html5 文章标签： html5 HTML

本文链接：https://blog.csdn.net/mr_tangshuai/article/details/78507205

版权

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单</title>
</head>
<body>
	<form action="">
账号：<input type="text" placeholder="请输入账号"><br>
密码：<input type="password" placeholder="请输入密码"><br>
性别：<input type="radio" name="sex" id="1" checked="checked"><label for="1">男</label>  
		<input type="radio" name="sex" id="2"> <label for="2">女</label><br>
     精通的語言：
     <input type="checkbox" checked="checked">java
     <input type="checkbox" >html
     <input type="checkbox" >css
     <input type="checkbox" >Ruby
     <input type="checkbox" >python <br>
     选择所在省：
     <select name="" id="">
 			<option value="">1</option>
 			<option value="">2</option>
 			<option value="">3</option>
     </select> <br>
     选择组：
     <select name="" id="">
            <optgroup label="湖北省">
            <option value="">wh</option>
            <option value="">hs</option>
            <option value="">jz</option>
            </optgroup>
            <optgroup label="湖南省">
            <option value="">yy</option>
            <option value="">cs</option>
            <option value="">zz</option>
            </optgroup>
     </select> <br>
     选择所在专业：<input type="text" list="majors">
    		 <datalist id="majors">
				<option value="">q</option>
				<option value="">w</option>
				<option value="">e</option>
				<option value="">r</option>
    		 </datalist> <br>

    		 选择精通的领域：
    		 <select multiple="">
    		 <option value="">文学</option>
 					<option value="">麻将</option>
 					<option value="">斗地主</option>
 					<option value="">软件开发</option>
 					<option value="">五行八卦</option>
    		 </select> <br>
    		 选择头像：
    		 <input type="file"> <br> 
    		 个人简介：
    		 <textarea name="" id="" cols="30" rows="10" placeholder="说点什么吧"></textarea> <br>

    		 时间选择：<input type="time"> <br>
    		 日期选择：<input type="date"> <br>
			周选择：<input type="week"> <br>
			日期时间选择：<input type="datetime-local"> <br>
			月份选择：<input type="month"> <br>
			数字选择：<input type="number" min="0" max="100"> <br>
			范围选择：<input type="range" mim="0" max="100" value="0"> <br>
			邮箱地址：<input type="email"> <br>
			手机号：<input type="phone" required pattern="^1[3578]\d{9}$"> <br>
			搜索框：<input type="search"> <br>
			地址：<input type="url"> <br>
			<input type="submit" value="提交">
			<input type="reset" value="重置">
			普通按钮：<input type="button" value="普通按钮">
			提交按钮：<button>提交按钮</button>
	</form>
	<<!-->对表单分组</!-->
	<fieldset style="width: 300px">
			<legend>用户登入</legend>
			<label for="">用户名</label>
			<input type="text"> <br>
			<label for="">密码</label>
			<input type="password">
			<!-->回话跟踪技术组成之一，主要用于在前后端隐式传值</!-->
			<input type=" hidden" value="隐藏域的数据是不会在文本显示">
	</fieldset>
</body>
</html>