html&css学习笔记----YJZJZQA
HTML表单：
（🐖：本文部分代码需要在W3School平台上运行）
表单用于搜集不同类型的用户输入
Content 元素：<form>*,<input>,<fieldset>,<legend>,<select>,<textarea>,<button>,<datalist>,<keygen>,<output>;(紫色的是HTML5增加的表单元素)
属性：type,action,method,name;
1、<form>元素
form元素是定义HTML表单的一个重要元素，每一个表单，都需要一对<form>，相当于每个html文件都要有一对<html>一样。
🌰
<form>
.......form elements.......
</form>
2、<input>元素+type属性
input元素是最重要的表单元素！！！
他有许多形态，根据不同的type属性.我觉得我应该把常用的列举出来，这样有利于自己以后记忆。
type属性的类型:text/password/submit/radio/checkbox/button/number/date/color/range/month/week/time/datetime/datetime-local/email/search/tel/url;
1)text <input type="text"> 定义供文本输入的单行输入字段：
🌰
text<!DOCTYPE html> <html> <body> <form action=""> 姓名：<br> <input type="text" name="姓名"> <br> 性别：<br> <input type="text" name="性别"> <br><br> </form> </body> </html>🍎
2）password <input type="password"> 定义密码字段:
🌰
password<!DOCTYPE html> <html> <body> <form action=""> User name:<br> <input type="text" name="userid"> <br> User password:<br> <input type="password" name="psw"> </form> <p>密码字段中的字符将被掩码（显示为星号或者是圆点）</p> </body> </html>🍎
3）submit <input type="submit"> 定义提交表单数据至表单处理程序的按钮
🐖：表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面，在表单的action属性中规定表单处理程序（form-handler）
🌰
submit<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> <!-- 如果要提交代码实验的话，请在这个网站上运行http://www.w3school.com.cn/tiy/t.asp?f=html_input_submit--> 姓名:<br> <input type="text" name="姓名" value="宇宙无敌超级究极大帅鸭"> <br> 性别:<br> <input type="text" name="性别" value="可男可女"> <br><br> <input type="submit" value="提交"> <!-- value 可以省略，默认显示“提交”--> </form> <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p> </body> </html>🍎
4）ratio <input type="radio"> 定义单选按钮
在许多选项里面只能选一个
🌰
ratio<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> <!-- 地址同上 --> 性别：<br> <input type="radio" name="sex" value="male" checked>洒家是纯爷们！ <br> <input type="radio" name="sex" value="female">我是小娘子！ <br><br> <input type="submit"> </form> </body> </html>🍎
5）checkbox <input type="checkbox"> 定义复选框
复选框允许用户在有限数量的选项中选择零个或多个选项（区别于radio）
🌰
checkbox<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> <input type="checkbox" name="vehicle" value="Bike">我有车，自行车 <br> <input type="checkbox" name="vehicle" value="Car">抱歉，我还有车，小轿车 <br><br> <input type="submit"> </form> <p>虽然我现在啥都没有，手动滑稽~</p> </body> </html>🍎
6）button <input type="button"> 定义了按钮
🌰
button<!DOCTYPE html> <html> <body> <input type="button" onclick="alert('Hello World!')"> <!-- alert 为js语句，作用是弹出一个小窗口 --> </body> </html>🍎
7）number <input type="number"> 用于应该包含数字值的输入字段
我们可以对数字做出一些限制，（靠！怎么关灯了！） 咳咳，怎么限制？目前我就知道可以用min、max来限制最小最大值，其他的等学到了再补充吧。
🌰
number<!DOCTYPE html> <html> <body> <p> 根据浏览器支持：<br> 数值约束会应用到输入字段中。 </p> <form action="/demo/demo_form.asp"> 数量（1 到 5 之间）： <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>注释：</b>IE9 及早期版本不支持 type="number"。</p> </body> </html>🍎
8）date <input type="date"> 用于应该包含日期的输入字段
根据牛览器支持嘞，日期选择器会粗现输入字段中
🌰
date<!DOCTYPE html> <html> <body. <form action="/demo/demo_form.asp"> 小帅哥我的生日： <input type="date" name="bday" > <input type="submit"> </form> <p><b>注意：</b>Firefox 或者 Internet Explorer 11 以及更早版本不支持 type="date" </p> <p>🐖小帅哥我的生日是 199X/04/10</p> </body> </html>🍎
9）color <input type="color">用于应该包含颜色的输入字段
根据浏览器的支持呢，颜色选择器会出现输入字段中，在此谢谢浏览器的支持！谢谢！（今天好像忘记吃药了...）
🌰
color<!DOCTYPE html> <html> <body> <form> 选择你最喜欢的袜子的颜色： <input type="color" name="favsock" value="#ff0000"> </form> <p><b>Note:</b> type="color" 在IE浏览器中不被支持，真是不讨人喜欢的浏览器啊.</p> </body> </html>🍎
10）range <input type="range"> 用于定义包含一定范围的值的输入字段。根据浏览器的支持，输入字段能够显示为滑块控件。谢谢浏览器！
🌰
range<!DOCTYPE html> <html> <body> <form > Points: <input type="range" name="points" min="0" max="10"> </form> </body> </html>🍎
11）month <input type="month"> 允许用户选择月份和年份
根据浏览器的支持！日期选择器会出现在输入的字段（感觉好高级），谢谢浏览器！
🌰
month<!DOCTYPE html> <html> <body> <form> 单身纪念日（月和年）： <input type="month" name="单身"> <input type="submit"> </form> </body> </html>🍎
12）week <input type="week"> 允许用户选择周和年。
根据浏览器支持，日期选择器会出现输入字段中。 阿，谢谢浏览器！
🌰
week<!DOCTYPE html> <html> <body> <form action="action_page.php"> 你们知道一年有多少周吗？ <!-- 52周鸭--> <br> <input type="week" name="year_week"> </form> </body> </html>🍎
13）time <input type="time"> 允许用户选择时间（无时区）。
根据浏览器支持，时间选择器会出现输入字段中。谢谢浏览器！
🌰
time<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> 我想对你suo（嘿嘿）： <input type="time" name="usr_time"> </form> </body> </html>🍎
光棍节快乐鸭！！！！！！！！！！！！！！！！！！！······
14）datetime <input type="datetime"> 允许用户选择日期和时间（有时区）。
根据浏览器支持，日期选择器会出现输入字段中。谢谢浏览器！
🌰
datetime<!DOCTYPE html> <html> <body> <form > 生日（日期和时间）： <input type="datetime" name="bdaytime"> </form> <p><b>注释：</b>Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。</p> </body> </html>🍎
15）datetime-local <input type="datetime-local"> 允许用户选择日期和时间（无时区）。
根据浏览器支持，日期选择器会出现输入字段中。谢谢浏览器！
🌰
datetime-local<!DOCTYPE html> <html> <body> <form > 生日（日期和时间）： <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> <p><b>注释：</b>Firefox 或者 Internet Explorer 不支持 type="datetime-local"。</p> </body> </html>🍎
16）email <input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。谢谢浏览器！
🌰
<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> E-mail: <input type="email" name="email"> <input type="submit"> </form> <p> <b>注释：</b>IE9 及更早版本不支持 type="email"。</p> </body> </html>🍎
17）search <input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。//没太懂...这个search有啥用呢？
🌰
search<!DOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> 搜索谷歌： <input type="search" name="googlesearch"> <input type="submit"> </form> </body> </html>🍎
18）tel <input type="tel">用于应该包含电话号码的输入字段。
目前只有 Safari 8 支持 tel 类型。
19）url <input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持，在提交时能够自动验证 url 字段。谢谢浏览器！
🌰
url<!DOCTYPE html> <html> <body> <form > 请添加您的首页： <input type="url" name="homepage"> <input type="submit"> </form> <p><b>Note:</b>IE9 及其更早版本不支持 type="url"。</p> </body> </html>🍎
