HTML_CSS/JS交互_瑣碎功能_20230422_md
# HTML表單_應用_查漏補缺_CSS3_20230422
## 一、表單的應用?
### 1. hidden value 隱藏域 但是可以設(shè)置初始數(shù)據(jù)值
? 1. <!-- ? ? ? ?一個隱藏域hidden 的輸入框，指定為密碼類型，并預設(shè)隱藏域數(shù)據(jù)值 value -->
??
? ? <!-- ? ?一個只讀 readonly-->
? ? <p>
? ? ? ? 用戶名：<input type="text" name="username" maxlength="8" value="我是你爹" readonly>
? ? </p>
? ??
### 2. readonly 只讀?
<p>
? ? ? ? 用戶名：<input type="text" name="username" maxlength="8" value="我是你爹" readonly>
? ? </p>
? ??
### 3. disable 禁用?
<p>性別：
? ? ? ??
? ? ? ? <input type="radio" name="gender" value="boy" disabled>男
? ? ? ? <input type="radio" name="gender" value="girl">女
? ? ? ? <input type="radio" name="gender" value="othergender" checked>其他
? ? </p>
?
? ?
? ??
? ? ?<!--disabled 禁用 和 ?單/多選框的默認值checked可以疊加使用-->
#### 4.增強鼠標可用性 label點文字光標能自動鎖定到輸入框里
? ??
? ? ? ?<p>
? ? ? ? <label for="mark">你點我試試</label>
? ? </p>
? ??
? ??
? ? <p>反饋：
? ? ? ? <textarea name="advice" cols="10" rows="10" id="mark">Please... </textarea>
? ? </p>
## 二、常用方式：
### 1. placehoder 用戶提示語
? ?<p>
? ? ? ? 用戶名：<input type="text" name="username" maxlength="8" placeholder="請輸入。。。">
? ? </p>
? ??
? ??
或者直接用label標簽包起來，就不用寫主鍵
### 2.required
?required 請求一個值 必須填,不能為空 ?且和 必須指定為 password類型?
? ? <p>
? ? ? ? 卡號：<input type="number" name="id" required>
? ? ?</p>
### 3.pattern正則表達式
? ? ? ? ```java?
? ? ? ??
? ? ＜select＞＜option selected＞0＜/option＞＜/select＞ 展示效果默認選中0
? ? ＜select＞＜option value=”0” selected＞0＜/option＞＜option＞1＜/option＞＜/select＞ 展示效果默認選中0
? ? ＜select＞＜option value=”1” selected＞0＜/option＞＜/select＞ 展示效果默認選中1
? ? ＜select＞＜option＞0＜/option＞＜option selected＞1＜/option＞＜/select＞ 展示效果默認選中1
## 三、查漏補缺
### 1、html的Style內(nèi)嵌CSS_div樣式表示例
“div” 全稱為 “division” ，直譯“區(qū)塊”、“分塊”，作用是將頁面內(nèi)容分塊，便于樣式設(shè)置和JS操作?？墒褂?CSS 樣式為 div 元素添加背景、邊框、陰影等效果，增加頁面的美觀度和易讀性。
id、內(nèi)邊距、背景、邊框
```java
? <style>
? ? ? ? /* 指定要應用的樣式，將所有div元素的內(nèi)邊距設(shè)置為10像素 */
? ? ? ? div {
? ? ? ? ? ? padding: 10px;
? ? ? ? }
? ? ? ? /* 應用在id為example的div元素上，設(shè)置它的背景顏色為淺灰色 */
? ? ? ? #example {
? ? ? ? ? ? background-color: #f2f2f2;
? ? ? ? }
? ? ? ? /* 應用在class為highlight的div元素上，設(shè)置它的邊框為紅色，背景顏色為黃色 */
? ? ? ? .highlight {
? ? ? ? ? ? border: 2px solid red;
? ? ? ? ? ? background-color: yellow;
? ? ? ? }
? ? </style>
? ? <style>/*給一個id=hobby 的css示例 */
? ? .hobby {
? ? ? ? font-size: 5px;
? ? ? ? color: red;
? ? ? ? background-color: yellow;
? ? }
? ? </style>
</head>
<body>
<a href="#uAnthor">a name 跳</a>
<!-- 創(chuàng)建一個id為example的div元素 -->
<div id="example">
? ? <h2>我是一個示例</h2>
? ? <p>這是一個用于演示CSS樣式表的
? ? ? ? <div>標簽。</div>
? ? </p>
</div>
<!-- 創(chuàng)建一個class為highlight的div元素 -->
<div class="highlight">
? ? <h4>h3行元素這是示例</h4>
? ? <p>
? ? ? ? p段落標簽 用于演示div標簽的class屬性
? ? <div> div塊標簽 /p</div>
? ? </p>
</div>
```
### 2、控件文字
- 首先，input是自閉合標簽！ ?沒有 /input
- input type="text" name="username" placeholder="請輸入用戶名"
?然后，我們來談控件文字-->
? button 控件文字 /button
??
```java
? ?<hr>
? ? select下拉框的默認選中的效果展示：
? ? <!-- 展示效果默認選中順位第一的名為0的選項 -->
? ? <select>
? ? ? ? <option selected>0</option>
? ? </select>
? ? <!-- 下拉框展示效果selected設(shè)置選中 控件文字為空的選項，其內(nèi)部值為0 ?-->
? ? <select>
? ? ? ? <option value="0" selected></option>
? ? ? ? <option>1</option>
? ? </select>
? ? <!-- 展示效果默認選中名為0的 -->
? ? <select>
? ? ? ? <option value="1" selected>0</option>
? ? </select>
? ? <!-- 展示效果設(shè)置選中順位第二的控件文字為空 ?值為1的選項 ?-->
? ? <select>
? ? ? ? <option>0</option>
? ? ? ? <option value="1" selected></option>
? ? </select>
</form>
```
### 3、select下拉框的默認選中的效果展示：
```java
?<!-- 展示效果默認選中順位第一的名為0的選項 -->
? ? <select>
? ? ? ? <option selected>0</option>
? ? </select>
? ? <!-- 下拉框展示效果selected設(shè)置選中 控件文字為空的選項，其內(nèi)部值為0 ?-->
? ? <select>
? ? ? ? <option value="0" selected></option>
? ? ? ? <option>1</option>
? ? </select>
? ? <!-- 展示效果默認選中名為0的 -->
? ? <select>
? ? ? ? <option value="1" selected>0</option>
? ? </select>
? ? <!-- 展示效果設(shè)置選中順位第二的控件文字為空 ?值為1的選項 ?-->
? ? <select>
? ? ? ? <option>0</option>
? ? ? ? <option value="1" selected></option>
? ? </select>
</form>
```
### 4、下拉框select 開放標簽內(nèi) size 屬性的的展示效果
```java
<hr>
下拉框select 開放標簽內(nèi) size 屬性的的展示效果
選擇至少1個，默認是順位一 <br/>
<p>
? ? size='3'
? ? <select size='3'>..2個選項.. 展示2個選項
? ? ? ? <option>選項1</option>
? ? ? ? <option>選項2</option>
? ? </select>
? ? size='1'
? ? <select size='3'>..2個選項.. 展示2個選項
? ? ? ? <option>選項1</option>
? ? ? ? <option>選項2</option>
? ? </select>
? ??
```
### 5、下拉框select 開放標簽內(nèi) multiple 復選屬性的的展示效果?
```java
下拉框select 開放標簽內(nèi) multiple 復選屬性的的展示效果 <br/>
-1 選擇0-多個 （通過command控制） selected 默認設(shè)置多選 <br/>
<select multiple>
? ? <option value="1" selected>選項1</option>
? ? <option value="2">選項2</option>
? ? <option value="3" selected>選項3</option>
? ? <option value="4">選項4</option>
? ? <option value="5">選項5</option>
</select>
<hr>
-2 select multiple屬性下的name和value 的值傳輸問題：<br/>
<br>
1） multiple 復選屬性下拉框select 開放標簽 設(shè)置name和value ，查看數(shù)據(jù)傳輸效果 <br/>
2） multiple 復選框默認選中0個，不傳輸數(shù)據(jù)。<br/>
3） 可手動設(shè)置預設(shè)selected 預設(shè)選項的value作為？select1=默認值傳輸 <br/>
//<br/>
a 向 1.我的第一個網(wǎng)頁 用get方式提交表單請求<br/>
b 表單中有select下拉框控件<br/>
c 通過name屬性命名select下拉框控件的元素名稱為"select1"<br/>
d 通過selected默認選中順位二、控件文字為"選項2"的可供選項<br/>
e value定義可控選項中"選項2"的值為value=1<br/>
f e時，.html?select1=1。即，提交表單時，控件文字為"選項2"的可供選項的值，<br>
作為默認值，賦值給對被name命名為select1的下拉框控件元素，并發(fā)送該值<br/>
<form action="1.我的第一個網(wǎng)頁.html" method="get">
? ? <select multiple="multiple" name="select1">
? ? ? ? <option value="0">選項1</option>
? ? ? ? <option value="1" selected>選項2</option>
? ? </select>
? ? <input type="submit">
</form>
```
### 6、id屬性在css樣式表和Javascript腳本文件中的運用
```java
<hr>
<h3>首先，科普id屬性：</h3>
id屬性 是HTML元素的屬性之一， 用于給該元素定義一個唯一的標識符,<br>
用JavaScript等腳本語言動態(tài)修改元素的屬性或內(nèi)容，<br>
或者與CSS style樣式表配合使用對該元素進行樣式設(shè)置等。<br>
通過在元素上設(shè)置id屬性，能精確定位、對HTML文檔中的各個元素進行操作。<br>
<br>
id-例1、javascript：<br>
<div id="myDiv"> 這是一個div元素 </div><br>
id屬性被用于為一個div元素定義了一個唯一的標識符，即“myDiv”。<br>
通過這個標識符，可在JavaScript中獲取這個元素，并進行隔html操作，如：<br>
var myDiv = document.getElementById("myDiv");//用于獲取具有指定id的元素。<br>
myDiv.style.color = "red"; // 修改元素字體顏色為紅色<br>
myDiv.innerHTML = "Hello JavaScript"; // 修改元素內(nèi)容為"Hello JavaScript"<br>
<br>
id-例2、html/css：
```
### 7、在checkbox復選框控件的在開放標簽中，運用設(shè)置id屬性
```java
了解了html的id屬性在css樣式表和Javascript腳本文件中的運用后，<br>
我們回到html的form表單中，在checkbox復選框控件的在開放標簽中，運用設(shè)置id屬性，<br>
此時，值為"hobby"id屬性值"hobby"為該復選框元素指定一個唯一的標識符 <br>
，如下所示：<br>
<form action="1.我的第一個網(wǎng)頁.html" method="get">
? ? <p class="hobby">
? ? ? ? 愛好：
? ? ? ? <input type="checkbox" id="hobby0">足球
? ? ? ? <input type="checkbox" id="hobby1">排球
? ? ? ? <input type="checkbox" id="hobby2">籃球
? ? </p>
? ? <input type="submit">
</form>
-這以checkbox多選框的顯示id屬性。<br>
```
### 8、在checkbox復選框控件的在開放標簽中，運用設(shè)置id屬性-區(qū)分name屬性
-name屬性的用于為HTML該元素命名。：<br>
-name 屬性常用于form表單元素、name 錨點Anchor和 iframe 等。<br>
在表單元素中，name 屬性與 value 屬性一起使用，用于在提交表單時將表單數(shù)據(jù)發(fā)送到服務器。<br>
<br>
```java
<br>
<p>
? ? name-例2--iframe： <br>
? ? 指定iframe元素的name屬性值為"douban"，<br>
? ? 而兩個超鏈接的target 屬性值都設(shè)置為 "douban"，<br>
? ? 因此當鏈接被單擊時，目標頁面將在 iframe 中打開。<br>
? ? name="douban" 設(shè)置了 iframe 的名稱為 douban，<br>
? ? target="_blank" 表示在新窗口中打開鏈接。<br>
? ? 在頁面中使用 a 標簽時，可以使用 target="douban" 來讓鏈接在該iframe中打開，如：<br>
? ? <br>
? ? <iframe src="https://movie.douban.com" name="douban" target="_blank"></iframe>
? ? <br>
? ? <a href="https://movie.douban.com" target="douban" target="_blank">打開豆瓣電影</a>
</p>
<hr>
舉個例子，一個輸入框元素可以定義如下：這些元素均未成功傳輸數(shù)據(jù)
<form action="1.我的第一個網(wǎng)頁.html" method="get">
? ? <p>
? ? ? ? 愛好：
? ? ? ? <input type="checkbox" name="足球">足球
? ? ? ? <input type="checkbox" name="排球">排球
? ? ? ? <input type="checkbox" name="籃球">籃球
? ? ? ? <select name="select1">
? ? ? ? ? ? <option value="0">選項1</option>
? ? ? ? ? ? <option value="1">選項2</option>
? ? ? ? </select>
? ? ? ? <select value="0">
? ? ? ? ? ? <option name="select1">選項1</option>
? ? ? ? ? ? <option name="select1">選項2</option>
? ? ? ? </select>
? ? ? ? <input type="submit">
? ? </p>
</form>
```
### 10、控件文字和數(shù)據(jù)值，展示效果
```java
<hr>
<br/>控件文字和數(shù)據(jù)值，展示效果：<br/>
<select>
? ? <option selected>0</option>
</select>
<!-- 展示效果默認選中0 -->
<select>
? ? <option value="0"></option>
? ? <option>1</option>
</select>
<!-- 展示效果默認選中0 -->
<select>
? ? <option value="1">0</option>
? ? <option value="1">0</option>
</select>
<!-- 展示效果默認選中1 -->
<select>
? ? <option>1</option>
</select>
<!-- 展示效果默認選中1 -->
<hr>
```
### 11、用id、name 創(chuàng)建錨點
<br>
```java
用id創(chuàng)建錨點 <br>
<!-- 創(chuàng)建錨點 -->
<!-- 創(chuàng)建鏈接 -->
<a href="#uAnthor">a name 跳</a>
<a href="#my-paragraph">跳轉(zhuǎn)到段落</a>
<p id="md">我就是 p id中間 </p>
<br>
<p id="my-paragraph">這是一個段落。</p>
<a href="#md">跳轉(zhuǎn)到中間</a>
<a name="uAnthor"></a>
```
### 12、判斷能否同時選擇
```java
判斷能否同時選擇：
<p>
? ? <input type="radio" name="sex">男
? ? <input type="radio">女 <br>
? ? 可以同時選擇：未設(shè)置相同的name，不屬于同一組單選框。 <br>
</p>
<p>
? ? <input type="radio">男
? ? <input type="radio" name="sex">女 <br>
? ? 可以同時選擇：未設(shè)置相同的name，不屬于同一組單選框。 <br>
</p>
<p>
? ? <input type="radio">男
? ? <input type="radio">女 // 可以同時選擇
? ? 可以同時選擇：未指定name屬性，不屬于同一組單選框。 <br>
</p>
<p>
? ? <input type="radio" name="sex">男
? ? <input type="radio" name="sex">女 <br>
? ? 不可同時選擇：指定了相同的name屬性的多個單選框，屬于同一組。<br>
</p>
<hr>
```
### 13、復選框樣式 命名、值等
```java
<hr>
<select>
? ? <option>Option 1</option>
? ? <option>Option 2</option>
</select>
<form action="1.我的第一個網(wǎng)頁.html" method="get">
? ? <hr>
? ? <select>
? ? ? ? province
? ? ? ? <option>0</option>
? ? </select>
? ? <select>
? ? ? ? <option value="0"></option>
? ? </select>
? ? <select name="province">
? ? ? ? <option value="1">0</option>
? ? </select>
? ? <select name="province">
? ? ? ? <option>2</option>
? ? ? ? <option>5</option>
? ? ? ? <option selected>8</option>
? ? </select>
? ? <!-- ? ?<hr>-->
? ? <input type="checkbox" name="足球">
? ? <input type="checkbox" name="排球">
? ? <input type="checkbox" name="籃球">
</form>
<hr>
愛好：足球<input type="checkbox" id="hobby3">排球<input type="checkbox" id="hobby4">籃球<input type="checkbox" id="hobby">
愛好：<input type="checkbox" value="足球">足球<input type="checkbox" value="排球">排球<input type="checkbox" value="籃球">籃球
愛好：<input type="checkbox" name="足球">足球<input type="checkbox" name="排球">排球<input type="checkbox" name="籃球">籃球
愛好：<input type="checkbox" name="hobby">足球<input type="checkbox" name="hobby">排球<input type="checkbox" name="hobby">籃球
<hr>
<form action="1.我的第一個網(wǎng)頁.html" method="get">
? ? <select name="水果" multiple>
? ? ? ? <option value="apple">蘋果</option>
? ? ? ? <option value="banana">香蕉</option>
? ? ? ? <option value="orange">橙子</option>
? ? ? ? <option value="grape">葡萄</option>
? ? </select>
? ? <input type="submit">
</form>
<hr>
<label for="fruit">請選擇你喜歡的水果：</label>
<select id="fruit" name="fruit">
? ? <option value="apple">蘋果</option>
? ? <option value="banana">香蕉</option>
? ? <option value="orange">橙子</option>
? ? <option value="grape">葡萄</option>
</select>
<!--</select>-->
<a name="uAnthor"></a>
<hr>
```
### 14、分析表單，判斷哪個可以成功跳轉(zhuǎn)谷歌：
```java
<p>
<form action="http://www.google.com" method="get">
? ? <input type="text" name="username" value="123">
? ? <input type="submit" value="提交">
</form>
</p>
<P>
<form action="http://www.google.com" method="post">
? ? <input type="text" name="username" value="123"/>
? ? <input type="submit" value="提交"/>
</form>
</p>
<p>
<form action="http://www.google.com" method="get">
? ? <input type="text" name="username" value="123"/>
? ? <input type="button" name="button1" value="提交"/>
</form>
</p>
<p>
<form action="http://www.google.com" method="get">
? ? <input type="text" name="username" value="123"/>
? ? <input type="submit" value="提交"/>
</form>
</p>
<hr>
```
### 15、判斷下拉框的數(shù)據(jù)傳輸情況
```java
<br>1、可控選項未指定value值，則控件文字為傳輸數(shù)據(jù)。
<br>2、可控選項指定value值，此值作為數(shù)據(jù)傳輸。
<br>3、可控選項指定value值，此值作為數(shù)據(jù)傳輸，控件文字純粹為展示標識。
<br>
<form action="1.我的第一個網(wǎng)頁.html" method="get">
? ? <select readonly name="select1">
? ? ? ? <option>2</option>
? ? ? ? <option value="3"></option>
? ? ? ? <option value="5">4</option>
? ? </select>
? ? <input type="submit" value="提交"/>
</form>
<hr>
<hr>
<hr>
```
### 16、input 標簽的按鈕和button標簽的按鈕異同
<hr>
input 標簽的按鈕和button標簽的按鈕異同。<br>
<hr>
button按鈕具備表單功能，但是不傳輸具體數(shù)據(jù)值：<br>
首先是input下，按鈕本身value設(shè)置按鈕的控件文字： <br>
submit: 提交表單 <br>
reset: 重置表單 <br>
button: 普通按鈕 <br>
```java
<form action="http://www.google.com" method="get">
? ? <input type="text" name="username" value="123"/>
? ? <input type="submit"/>input type="submit"<br>
? ? <input type="reset" value="重0置">重1置 input type="reset"<br>
? ? <input type="button" value="submit">input type="button"<br>
? ? 這是一個控件文字為"submit"的真·button 類型按鈕：<br>
吐槽：
```
? ? input內(nèi)的button就是鬧著玩，沒有submit功能，<br>
? ? 也不能拓展屬性type，
? ? 無靈活性和不可定制<br>
? ? <br>
? ? 而button標簽：<br>
? ? 1、默認值為 submit <br>
? ? 2、button標簽也可以type：指定按鈕的類型，<br>
? ? 3、button可使用 JavaScript 或 CSS 來控制外觀和行為。
? ? -包括 <br>
? ? -submit（提交表單）<br>
? ? -reset（重置表單）<br>
? ? -button（普通按鈕）<br>
? ??
? ??
```java
? ? <br>
? ? <button></button>
? ? 空，默認type="submit"
? ? <button type="button"></button>
? ? type="button"<br>
? ? <button type="submit"></button>
? ? type="submit"<br>
? ? <button type="reset" name="reset" value="reset">type="reset" 重置</button>
? ? <br>
? ? <button type="submit" name="button" value="button" disabled>被禁用的提交按鈕</button>
? ? <br>
</form>
<form action="http://www.google.com" method="get">
? ? <input type="text" name="username" value="123"/>
? ? <p>我是input標簽的button，submit提交、reset重置
? ? ? ? <input type="button" id="button1" value="submit"/>
? ? ? ? <input type="reset">
? ? ? ? <input type="submit"/>
? ? </p>
? ? <button type="submit" name="submit" value="submit">提交</button>
? ? <button type="reset" name="reset" value="reset">重置</button>
? ? <button type="button" name="button" value="button" disabled>禁用按鈕</button>
</form>
<hr>
```
PS：
