HTML表单:
(?:本文部分代码需要在W3School平台上运行)
表单用于搜集不同类型的用户输入
Content 元素:*,,
属性:type,action,method,name;
1、
form元素是定义HTML表单的一个重要元素,每一个表单,都需要一对
?
.......form elements.......
2、元素+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 定义供文本输入的单行输入字段:
?
![]()
textDOCTYPE html> <html> <body> <form action=""> 姓名:<br> <input type="text" name="姓名"> <br> 性别:<br> <input type="text" name="性别"> <br><br> form> body> html>
?
2)password 定义密码字段:
?
![]()
passwordDOCTYPE 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 定义提交表单数据至表单处理程序的按钮
?:表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面,在表单的action属性中规定表单处理程序(form-handler)
?
![]()
submitDOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> 姓名:<br> <input type="text" name="姓名" value="宇宙无敌超级究极大帅鸭"> <br> 性别:<br> <input type="text" name="性别" value="可男可女"> <br><br> <input type="submit" value="提交"> form> <p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。p> body> html>
?
4)ratio 定义单选按钮
在许多选项里面只能选一个
?
![]()
ratioDOCTYPE 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 定义复选框
复选框允许用户在有限数量的选项中选择零个或多个选项(区别于radio)
?
![]()
checkboxDOCTYPE 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 定义了按钮
?
![]()
buttonDOCTYPE html> <html> <body> <input type="button" onclick="alert('Hello World!')"> body> html>
?
7)number 用于应该包含数字值的输入字段
我们可以对数字做出一些限制,(靠!怎么关灯了!) 咳咳,怎么限制?目前我就知道可以用min、max来限制最小最大值,其他的等学到了再补充吧。
?
![]()
numberDOCTYPE 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 用于应该包含日期的输入字段
根据牛览器支持嘞,日期选择器会粗现输入字段中
?
![]()
dateDOCTYPE html> <html> <body.
?
9)color 用于应该包含颜色的输入字段
根据浏览器的支持呢,颜色选择器会出现输入字段中,在此谢谢浏览器的支持!谢谢!(今天好像忘记吃药了...)
?
![]()
colorDOCTYPE html> <html> <body> <form> 选择你最喜欢的袜子的颜色: <input type="color" name="favsock" value="#ff0000"> form> <p><b>Note:b> type="color" 在IE浏览器中不被支持,真是不讨人喜欢的浏览器啊.p> body> html>
?
10)range 用于定义包含一定范围的值的输入字段。根据浏览器的支持,输入字段能够显示为滑块控件。谢谢浏览器!
?
![]()
rangeDOCTYPE html> <html> <body> <form > Points: <input type="range" name="points" min="0" max="10"> form> body> html>
?
11)month 允许用户选择月份和年份
根据浏览器的支持!日期选择器会出现在输入的字段(感觉好高级),谢谢浏览器!
?
![]()
monthDOCTYPE html> <html> <body> <form> 单身纪念日(月和年): <input type="month" name="单身"> <input type="submit"> form> body> html>
?
12)week 允许用户选择周和年。
根据浏览器支持,日期选择器会出现输入字段中。 阿,谢谢浏览器!
?
![]()
weekDOCTYPE html> <html> <body> <form action="action_page.php"> 你们知道一年有多少周吗? <br> <input type="week" name="year_week"> form> body> html>
?
13)time 允许用户选择时间(无时区)。
根据浏览器支持,时间选择器会出现输入字段中。谢谢浏览器!
?
![]()
timeDOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> 我想对你suo(嘿嘿): <input type="time" name="usr_time"> form> body> html>
?
光棍节快乐鸭!!!!!!!!!!!!!!!!!!!······
14)datetime 允许用户选择日期和时间(有时区)。
根据浏览器支持,日期选择器会出现输入字段中。谢谢浏览器!
?
![]()
datetimeDOCTYPE 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 允许用户选择日期和时间(无时区)。
根据浏览器支持,日期选择器会出现输入字段中。谢谢浏览器!
?
![]()
datetime-localDOCTYPE 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 用于应该包含电子邮件地址的输入字段。
根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。谢谢浏览器!
?
![]()
![]()
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 用于搜索字段(搜索字段的表现类似常规文本字段)。//没太懂...这个search有啥用呢?
?
![]()
searchDOCTYPE html> <html> <body> <form action="/demo/demo_form.asp"> 搜索谷歌: <input type="search" name="googlesearch"> <input type="submit"> form> body> html>
?
18)tel 用于应该包含电话号码的输入字段。
目前只有 Safari 8 支持 tel 类型。
19)url 用于应该包含 URL 地址的输入字段。
根据浏览器支持,在提交时能够自动验证 url 字段。谢谢浏览器!
?
![]()
urlDOCTYPE html> <html> <body> <form > 请添加您的首页: <input type="url" name="homepage"> <input type="submit"> form> <p><b>Note:b>IE9 及其更早版本不支持 type="url"。p> body> html>
?