html&css学习笔记----YJZJZQA

时间:2021-09-01 08:49:47

 

 

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"> 定义供文本输入的单行输入字段:

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>
<form action="">

姓名:<br>
<input type="text" name="姓名">
<br>
性别:<br>
<input type="text" name="性别">
<br><br>

</form>
</body>
</html>
text

????

html&css学习笔记----YJZJZQA


 

2)password  <input type="password"> 定义密码字段:

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!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>
password

 ????

html&css学习笔记----YJZJZQA


 

3)submit  <input type="submit"> 定义提交表单数据至表单处理程序的按钮

????:表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面,在表单的action属性中规定表单处理程序(form-handler)

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!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>
submit

????

html&css学习笔记----YJZJZQA


 

4)ratio  <input type="radio"> 定义单选按钮

在许多选项里面只能选一个

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!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>
ratio

????

html&css学习笔记----YJZJZQA


 

5)checkbox <input type="checkbox"> 定义复选框

复选框允许用户在有限数量的选项中选择零个或多个选项(区别于radio)

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!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>
checkbox

????

html&css学习笔记----YJZJZQA


 

6)button  <input type="button"> 定义了按钮

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>

<input type="button" onclick="alert('Hello World!')">
<!-- alert 为js语句,作用是弹出一个小窗口 -->
</body>
</html>
button

????

html&css学习笔记----YJZJZQA

html&css学习笔记----YJZJZQA



 

7)number <input type="number"> 用于应该包含数字值的输入字段

我们可以对数字做出一些限制,(靠!怎么关灯了!) 咳咳,怎么限制?目前我就知道可以用min、max来限制最小最大值,其他的等学到了再补充吧。

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!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>
number

????

html&css学习笔记----YJZJZQA


8)date <input type="date"> 用于应该包含日期的输入字段 

根据牛览器支持嘞,日期选择器会粗现输入字段中

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!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>
date

????

html&css学习笔记----YJZJZQA


9)color <input type="color">用于应该包含颜色的输入字段

根据浏览器的支持呢,颜色选择器会出现输入字段中,在此谢谢浏览器的支持!谢谢!(今天好像忘记吃药了...)

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>

<form>
    选择你最喜欢的袜子的颜色:
    <input type="color" name="favsock" value="#ff0000">
</form>


<p><b>Note:</b> type="color" 在IE浏览器中不被支持,真是不讨人喜欢的浏览器啊.</p>

</body>
</html>
color

????

html&css学习笔记----YJZJZQA


10)range <input type="range"> 用于定义包含一定范围的值的输入字段。根据浏览器的支持,输入字段能够显示为滑块控件。谢谢浏览器!

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>
<form >
  Points:
  <input type="range" name="points" min="0" max="10">
</form>
</body>
</html>
range

????

html&css学习笔记----YJZJZQA


11)month <input type="month"> 允许用户选择月份和年份

根据浏览器的支持!日期选择器会出现在输入的字段(感觉好高级),谢谢浏览器!

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>

<form>
    单身纪念日(月和年):
    <input type="month" name="单身">
    <input type="submit">
</form>
</body>
</html>
month

????

html&css学习笔记----YJZJZQA


 

12)week  <input type="week"> 允许用户选择周和年。

根据浏览器支持,日期选择器会出现输入字段中。 阿,谢谢浏览器!

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
  你们知道一年有多少周吗? <!-- 52周鸭-->
<br>
  <input type="week" name="year_week">

</form>
</body>
</html>
week

????

html&css学习笔记----YJZJZQA

 


 

13)time <input type="time"> 允许用户选择时间(无时区)。

根据浏览器支持,时间选择器会出现输入字段中。谢谢浏览器!

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
  我想对你suo(嘿嘿):
  <input type="time" name="usr_time">
</form>

</body>
</html>
time

????

html&css学习笔记----YJZJZQA

光棍节快乐鸭!!!!!!!!!!!!!!!!!!!······

 


 

14)datetime <input type="datetime"> 允许用户选择日期和时间(有时区)。

根据浏览器支持,日期选择器会出现输入字段中。谢谢浏览器!

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>

<form >
  生日(日期和时间):
  <input type="datetime" name="bdaytime">
</form>

<p><b>注释:</b>Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。</p>

</body>
</html>
datetime

????

html&css学习笔记----YJZJZQA

 


 

15)datetime-local  <input type="datetime-local"> 允许用户选择日期和时间(无时区)。

根据浏览器支持,日期选择器会出现输入字段中。谢谢浏览器!

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!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>
datetime-local

????

html&css学习笔记----YJZJZQA

 


 

16)email  <input type="email"> 用于应该包含电子邮件地址的输入字段。

根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。谢谢浏览器!

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!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>
email

????

html&css学习笔记----YJZJZQA

 


 

17)search  <input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。//没太懂...这个search有啥用呢?

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
  搜索谷歌:
  <input type="search" name="googlesearch">
  <input type="submit">
</form>

</body>
</html>
search

????

html&css学习笔记----YJZJZQA

 


 

18)tel  <input type="tel">用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。


 

19)url  <input type="url"> 用于应该包含 URL 地址的输入字段。

根据浏览器支持,在提交时能够自动验证 url 字段。谢谢浏览器!

????

html&css学习笔记----YJZJZQAhtml&css学习笔记----YJZJZQA
<!DOCTYPE html>
<html>
<body>

<form >
  请添加您的首页:
  <input type="url" name="homepage">
  <input type="submit">
</form>

<p><b>Note:</b>IE9 及其更早版本不支持 type="url"。</p>

</body>
</html>
url

????

html&css学习笔记----YJZJZQA