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

时间 2019-12-06

标签 html&css html css 学习笔记 yjzjzqa 栏目 CSS 繁體版

原文原文链接

HTML表单：

（🐖：本文部分代码须要在W3School平台上运行）php

表单用于搜集不一样类型的用户输入html

Content 元素：<form>*,<input>,<fieldset>,<legend>,<select>,<textarea>,<button>,<datalist>,<keygen>,<output>;(紫色的是HTML5增长的表单元素)浏览器

　　　　　属性：type,action,method,name;服务器

一、<form>元素ide

　　form元素是定义HTML表单的一个重要元素，每个表单，都须要一对<form>，至关于每一个html文件都要有一对<html>同样。网站

　　🌰google

　　<form>url

　　.......form elements.......spa

　　</form>code

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

🌰
<!DOCTYPE html>
<html>
<body>
<form action="">

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

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

2）password <input type="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>
password
🍎

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

🐖：表单处理程序（form-handler）一般是包含处理输入数据的脚本的服务器页面，在表单的action属性中规定表单处理程序（form-handler）

🌰
<!DOCTYPE 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>
submit
🍎

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

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

🌰
<!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
🍎

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

复选框容许用户在有限数量的选项中选择零个或多个选项（区别于radio）

🌰
<!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
🍎

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

🌰
<!DOCTYPE html>
<html>
<body>

<input type="button" onclick="alert('Hello World!')">

</body>
</html>
button
🍎

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

咱们能够对数字作出一些限制，（靠！怎么关灯了！）咳咳，怎么限制？目前我就知道能够用min、max来限制最小最大值，其余的等学到了再补充吧。

🌰
<!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
🍎

8）date <input type="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>
date
🍎

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

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

🌰
<!DOCTYPE html>
<html>
<body>

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


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

</body>
</html>
color
🍎

10）range <input type="range"> 用于定义包含必定范围的值的输入字段。根据浏览器的支持，输入字段可以显示为滑块控件。谢谢浏览器！

🌰
<!DOCTYPE html>
<html>
<body>
<form >
  Points:
  <input type="range" name="points" min="0" max="10">
</form>
</body>
</html>
range
🍎

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

根据浏览器的支持！日期选择器会出如今输入的字段（感受好高级），谢谢浏览器！

🌰
<!DOCTYPE html>
<html>
<body>

<form>
    单身记念日（月和年）：
    <input type="month" name="单身">
    <input type="submit">
</form>
</body>
</html>
month
🍎

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

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

🌰
<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
  大家知道一年有多少周吗？ 
<br>
  <input type="week" name="year_week">

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

13）time <input type="time"> 容许用户选择时间（无时区）。

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

🌰
<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
  我想对你suo（嘿嘿）：
  <input type="time" name="usr_time">
</form>

</body>
</html>
time
🍎

光棍节快乐鸭！！！！！！！！！！！！！！！！！！！······

14）datetime <input type="datetime"> 容许用户选择日期和时间（有时区）。

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

🌰
<!DOCTYPE html>
<html>
<body>

<form >
  生日（日期和时间）：
  <input type="datetime" name="bdaytime">
</form>

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

</body>
</html>
datetime
🍎

15）datetime-local <input type="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>
datetime-local
🍎

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>
email
🍎

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

🌰
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
search
🍎

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

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

19）url <input type="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>
url
🍎