HTML_CSS/JS交互_琐碎功能_20230422_md
# HTML表单_应用_查漏补缺_CSS3_20230422
## 一、表单的应用
### 1. hidden value 隐藏域 但是可以设置初始数据值
1. <!-- 一个隐藏域hidden 的输入框，指定为密码类型，并预设隐藏域数据值 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内嵌CSS_div样式表示例
“div” 全称为 “division” ，直译“区块”、“分块”，作用是将页面内容分块，便于样式设置和JS操作。可使用 CSS 样式为 div 元素添加背景、边框、阴影等效果，增加页面的美观度和易读性。
id、内边距、背景、边框
```java
<style>
/* 指定要应用的样式，将所有div元素的内边距设置为10像素 */
div {
padding: 10px;
}
/* 应用在id为example的div元素上，设置它的背景颜色为浅灰色 */
#example {
background-color: #f2f2f2;
}
/* 应用在class为highlight的div元素上，设置它的边框为红色，背景颜色为黄色 */
.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>
<!-- 创建一个id为example的div元素 -->
<div id="example">
<h2>我是一个示例</h2>
<p>这是一个用于演示CSS样式表的
<div>标签。</div>
</p>
</div>
<!-- 创建一个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设置选中 控件文字为空的选项，其内部值为0 -->
<select>
<option value="0" selected></option>
<option>1</option>
</select>
<!-- 展示效果默认选中名为0的 -->
<select>
<option value="1" selected>0</option>
</select>
<!-- 展示效果设置选中顺位第二的控件文字为空 值为1的选项 -->
<select>
<option>0</option>
<option value="1" selected></option>
</select>
</form>
```
### 3、select下拉框的默认选中的效果展示：
```java
<!-- 展示效果默认选中顺位第一的名为0的选项 -->
<select>
<option selected>0</option>
</select>
<!-- 下拉框展示效果selected设置选中 控件文字为空的选项，其内部值为0 -->
<select>
<option value="0" selected></option>
<option>1</option>
</select>
<!-- 展示效果默认选中名为0的 -->
<select>
<option value="1" selected>0</option>
</select>
<!-- 展示效果设置选中顺位第二的控件文字为空 值为1的选项 -->
<select>
<option>0</option>
<option value="1" selected></option>
</select>
</form>
```
### 4、下拉框select 开放标签内 size 属性的的展示效果
```java
<hr>
下拉框select 开放标签内 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 开放标签内 multiple 复选属性的的展示效果
```java
下拉框select 开放标签内 multiple 复选属性的的展示效果 <br/>
-1 选择0-多个 （通过command控制） selected 默认设置多选 <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 开放标签 设置name和value ，查看数据传输效果 <br/>
2） multiple 复选框默认选中0个，不传输数据。<br/>
3） 可手动设置预设selected 预设选项的value作为？select1=默认值传输 <br/>
//<br/>
a 向 1.我的第一个网页 用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的下拉框控件元素，并发送该值<br/>
<form action="1.我的第一个网页.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等脚本语言动态修改元素的属性或内容，<br>
或者与CSS style样式表配合使用对该元素进行样式设置等。<br>
通过在元素上设置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"; // 修改元素内容为"Hello JavaScript"<br>
<br>
id-例2、html/css：
```
### 7、在checkbox复选框控件的在开放标签中，运用设置id属性
```java
了解了html的id属性在css样式表和Javascript脚本文件中的运用后，<br>
我们回到html的form表单中，在checkbox复选框控件的在开放标签中，运用设置id属性，<br>
此时，值为"hobby"id属性值"hobby"为该复选框元素指定一个唯一的标识符 <br>
，如下所示：<br>
<form action="1.我的第一个网页.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复选框控件的在开放标签中，运用设置id属性-区分name属性
-name属性的用于为HTML该元素命名。：<br>
-name 属性常用于form表单元素、name 锚点Anchor和 iframe 等。<br>
在表单元素中，name 属性与 value 属性一起使用，用于在提交表单时将表单数据发送到服务器。<br>
<br>
```java
<br>
<p>
name-例2--iframe： <br>
指定iframe元素的name属性值为"douban"，<br>
而两个超链接的target 属性值都设置为 "douban"，<br>
因此当链接被单击时，目标页面将在 iframe 中打开。<br>
name="douban" 设置了 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>
举个例子，一个输入框元素可以定义如下：这些元素均未成功传输数据
<form action="1.我的第一个网页.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、控件文字和数据值，展示效果
```java
<hr>
<br/>控件文字和数据值，展示效果：<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 创建锚点
<br>
```java
用id创建锚点 <br>
<!-- 创建锚点 -->
<!-- 创建链接 -->
<a href="#uAnthor">a name 跳</a>
<a href="#my-paragraph">跳转到段落</a>
<p id="md">我就是 p id中间 </p>
<br>
<p id="my-paragraph">这是一个段落。</p>
<a href="#md">跳转到中间</a>
<a name="uAnthor"></a>
```
### 12、判断能否同时选择
```java
判断能否同时选择：
<p>
<input type="radio" name="sex">男
<input type="radio">女 <br>
可以同时选择：未设置相同的name，不属于同一组单选框。 <br>
</p>
<p>
<input type="radio">男
<input type="radio" name="sex">女 <br>
可以同时选择：未设置相同的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.我的第一个网页.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.我的第一个网页.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、分析表单，判断哪个可以成功跳转谷歌：
```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、判断下拉框的数据传输情况
```java
<br>1、可控选项未指定value值，则控件文字为传输数据。
<br>2、可控选项指定value值，此值作为数据传输。
<br>3、可控选项指定value值，此值作为数据传输，控件文字纯粹为展示标识。
<br>
<form action="1.我的第一个网页.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按钮具备表单功能，但是不传输具体数据值：<br>
首先是input下，按钮本身value设置按钮的控件文字： <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内的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：
