HTML基础（三）表单

前言

---

一、表单的基本结构

<form  method="post" action="result.html">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填“/> 
   </p>
</form>

二、表单元素格式

三、单选框、复选框和下拉框

<p><form action="#">
			<p><input type="radio" name="radio" value="88.5" checked>88.5<br>
			<input type="radio" name="radio" value="89.7">89.7<br>
			<input type="radio" name="radio" value="101.1">101.1<br>
			<input type="radio" name="radio" value="87.9">87.9</p>
			<input type="submit" value="submit">
		</form></p> 
		<p><form action="#">
			<p></p>
			<p><input type="checkbox" name="hobby" value="sports">体育</p>
			<p><input type="checkbox" name="hobby" value="music">音乐</p>
			<p><input type="checkbox" name="hobby" value="reading">阅读</p>
			<p><input type="checkbox" name="hobby" value="games">游戏</p>
			<p><input type="checkbox" name="hobby" value="shopping">购物</p>
			<input type="submit">
		</form></p>
		<p><form action="#">
			<select name="职业">
				<option value="teacher">教师</option>
				<option value="student" selected>学生</option>
				<option value="doctor">医生</option>
				<option value="lawyer">律师</option>
			</select>
			<p><input type="submit"></p>
		</form></p> 
		<input type="button" value="input按钮" onclick="javascript:alert('你好')">
		<button onclick="javascript:alert('你好')">button框</button>
		<input type="image" src="img/1.jpg" onclick="javascript:alert('你好')">

四、文件、邮件、数字、滑块、搜索

		<form action="#">
			<p><textarea name="words" id="" cols="30" rows="10"></textarea></p>
			<p><input type="file" name="files">
			<input type="submit" value="点我上传文件"></p>
			<p><input type="email" name="email">
			<input type="submit"></p>
			<p><input type="url" name="usrurl">
			<input type="submit"></p>
			<p><input type="number" name="num" min="0" max="20" size="1" value="1">
			<input type="submit"></p>
			<p><input type="range" name="range" min="0" max="10" value="0"></p>
			<p><input type="search" name="search">
			<input type="submit"></p>
		</form>