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
🍎