HTML5表单

文本框

<form method="get" action="">
	账号：<input type="text" name="userName" value="码云" size="30" maxlength="6"/>
</form>

密码输入框

<form action="" method="post">
	<input type="password" name="" id="" value="" />
</form>

单选框

<form action="" method="post">
	性别：
	<input type="radio" name="gen" value="0" checked/>女
	<input type="radio" name="gen"  value="1" />男
</form>

复选框

<form action="" method="post">
	爱好：
	<input type="checkbox" name="box" value="play" checked/>玩游戏
	<input type="checkbox" name="box"  value="sing" />唱歌
	<input type="checkbox" name="box"  value="sleep" checked/>睡觉
</form>

下拉列表

<form action="" method="post">
	今天是周几：
	<select name="week">
	<option value="1">周一</option>
	<option value="2">周二</option>
	<option value="3">周三</option>
	<option value="4" >周四</option>
	<option value="5" selected>周五</option>
	<option value="6">周六</option>
	<option value="7">周日</option>
	</select>
</form>



下拉列表---------select
name-------名称
size-------几行
定义一个选项---------option
value------表单实际提交的值
selected------默认选中的选项

按钮

<form action="form/result.html" method="post">
			<!-- 
			type属性值
			 reset-------重置按钮
			 submit-------提交
			 button------普通按钮
			value-----按钮显示的文字
			 -->
			 <p>
				账户：<input type="text" name="name"  value="" /> 
			 </p>
			<p>
				<input type="reset" name="reset" value="重置" />
				 <input type="submit" name="submit"  value="提交" />
				 <input type="button" name="button"  value="普通按钮" onclick="alert('点我干啥!!')"/>
				 <input type="image" src="images/login.gif"/>
			</p> 
		</form>

多行文本域

		<form action="" method="post">
			
			<!-- 
			textarea------定义多行文本域
				name------起个名
				cols------显示的列数（宽度）
				rows------显示的行数（高度）
			 -->
			 个人你评价：<textarea name="123" cols="" rows=""></textarea>
		</form>

文件域

<form action="" method="post" enctype="multipart/form-data">
			
			<p><input type="file"/></p>
			<input type="button" value="点击上传" />
		</form>

邮箱&网址

<form action="" method="post">
			
			<!-- 
			type属性
			 邮箱------email
			 网址------url
			 -->
			 <p>
				 邮箱：
				 <input type="email" name="email" />
			 </p>
			 <p>
				 网址：
				 <input type="url" name="url"  />
			 </p>
			 <input type="submit" value="提交" />
		</form>

数字

<form action="" method="post">
			
			<p>
				日期：<input type="number" min="0" max="31" step="2"/>
			</p>
			<input type="submit" name="" id="" value="提交" />
		</form>

滑块

<form action="" method="post">
			
			项目完成进度：<input type="range" min="0" max="100" step="2"/>
		</form>

搜索框

<form action="" method="post">
			
			搜索：<input type="search" name="search"/>
		</form>

隐藏域

<form action="" method="post">
			<p>1.HTML中定义表单使用哪个元素？(&nbsp;&nbsp;)。(单选)</p>
			<p><input type="radio" name="xuanxiang"  value="A" />A.table</p>
			<p><input type="radio" name="xuanxiang"  value="B" />B.from</p>
			<p><input type="radio" name="xuanxiang"  value="C" />C.form</p>
			<p><input type="radio" name="xuanxiang"  value="D" />D.iframe</p>
			正确答案：<input type="hidden" name="" id="" value="C" />
		</form>

只读&禁用

<form action="" method="post">
			
			<p>
			用户名：
				<input type="text" name="name"  value="张三" readonly/>
			</p>
			<input type="submit" disabled value="保存"/>
		</form>

表单标注元素

<form action="" method="post">
			
			<p>
				<input type="radio" name="sex" id="nan" value="1" />
				<label for="nan">渣男去死吧</label>
				<input type="radio" name="sex" id="nv" value="0" />
				<label for="nv">女神美美哒</label>
			</p>
		</form>

提示

<form action="form/result.html" method="get">
			<p>
				用户名：
				<input type="text" name="name" value="123" placeholder="请输入用户名" required />
			</p>
			<p>
				日期：
				<input type="text" name="" id="" value="123" placeholder="日期格式为yyyy-mm-dd" required/>
			</p>
			<p>
				手机号：
				<input type="text" name="" id="" required pattern="^1[37589]\d{9}" />
			</p>
			<input type="submit" value="提交" />
		</form>

点击返回目录页