HTML_CSS/JS交互_查漏补缺_20230422

最新推荐文章于 2023-11-24 09:57:21 发布

iehmltym

最新推荐文章于 2023-11-24 09:57:21 发布

阅读量171

点赞数

分类专栏： HTML2023 文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_53433382/article/details/130345922

版权

HTML2023 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML_CSS/JS交互_查漏补缺_20230422

一、表单的应用

1. hidden value 隐藏域但是可以设置初始数据值

<!--    一个只读 readonly-->
<p>
    用户名：<input type="text" name="username" maxlength="8" value="我是你爹" readonly>
</p>

2. readonly 只读

用户名：

3. disable 禁用

性别：

    <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 用户提示语

用户名：

或者直接用label标签包起来，就不用写主键

2.required

required 请求一个值必须填,不能为空且和必须指定为 password类型

卡号：

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、内边距、背景、边框

  <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样式表的
        &lt;div&gt;标签。&lt;/div&gt;
    </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

   <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下拉框的默认选中的效果展示：

 <!-- 展示效果默认选中顺位第一的名为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 属性的的展示效果


<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 复选属性的的展示效果


下拉框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脚本文件中的运用


<hr>
<h3>首先，科普id属性：</h3>
id属性 是HTML元素的属性之一， 用于给该元素定义一个唯一的标识符,<br>
用JavaScript等脚本语言动态修改元素的属性或内容，<br>
或者与CSS style样式表配合使用对该元素进行样式设置等。<br>
通过在元素上设置id属性，能精确定位、对HTML文档中的各个元素进行操作。<br>
<br>
id-例1、javascript：<br>
&lt;div id="myDiv"&gt; 这是一个div元素 &lt;/div&gt;<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属性


了解了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该元素命名。：

-name 属性常用于form表单元素、name 锚点Anchor和 iframe 等。

在表单元素中，name 属性与 value 属性一起使用，用于在提交表单时将表单数据发送到服务器。


<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、控件文字和数据值，展示效果


<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 创建锚点

用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、判断能否同时选择

判断能否同时选择：

<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、复选框样式命名、值等

<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、分析表单，判断哪个可以成功跳转谷歌：

<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、判断下拉框的数据传输情况


<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标签的按钮异同

input 标签的按钮和button标签的按钮异同。

button按钮具备表单功能，但是不传输具体数据值：
首先是input下，按钮本身value设置按钮的控件文字：
submit: 提交表单
reset: 重置表单
button: 普通按钮

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


    <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：
html文件源码

        
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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样式表的
        &lt;div&gt;标签。&lt;/div&gt;
    </p>
</div>

<!-- 创建一个class为highlight的div元素 -->
<div class="highlight">
    <h4>h3行元素这是示例</h4>
    <p>
        p段落标签 用于演示div标签的class属性
    <div> div块标签 /p</div>
    </p>
</div>
<form action="1.我的第一个网页.html">

    <!--    控件文字
    首先，input是自闭合标签！  没有 <input> </input>
    <input type="text" name="username" placeholder="请输入用户名">
    -->
    <!--    然后，我们来谈控件文字-->
    <!--    <button>控件文字</button>-->
    <!--    <input type="button" value="控件文字" />      -->
    <hr>
    控件文字 <br/>
    <button value="1">2</button>
    <input type="button" value="1">2
    <button value="1">2</button>
    <input type="button" value="1">2</input>

    <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>
<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>
<hr>
下拉框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>

<hr>
<h3>首先，科普id属性：</h3>
id属性 是HTML元素的属性之一， 用于给该元素定义一个唯一的标识符,<br>
用JavaScript等脚本语言动态修改元素的属性或内容，<br>
或者与CSS style样式表配合使用对该元素进行样式设置等。<br>
通过在元素上设置id属性，能精确定位、对HTML文档中的各个元素进行操作。<br>
<br>
id-例1、javascript：<br>
&lt;div id="myDiv"&gt; 这是一个div元素 &lt;/div&gt;<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：
了解了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>
-name属性的用于为HTML该元素命名。：<br>
-name 属性常用于form表单元素、name 锚点Anchor和 iframe 等。<br>
在表单元素中，name 属性与 value 属性一起使用，用于在提交表单时将表单数据发送到服务器。<br>
<br>


<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>
用id创建锚点 <br>
<!-- 创建锚点 -->

<!-- 创建链接 -->
<a href="#my-paragraph">跳转到段落</a>
<p id="md">我就是 p id中间 </p>
<br>

<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>
判断能否同时选择：
<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>
<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>
分析表单，判断哪个可以成功跳转谷歌：

<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>
判断下拉框的数据传输情况：
<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>
input 标签的按钮和button标签的按钮异同。<br>
<hr>
button按钮具备表单功能，但是不传输具体数据值：<br>
首先是input下，按钮本身value设置按钮的控件文字： <br>
submit: 提交表单 <br>
reset: 重置表单 <br>
button: 普通按钮 <br>

<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>
    <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>
<hr>


<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>
<p id="my-paragraph">这是一个段落。</p>
<a href="#md">跳转到中间</a>

</body>
</html>

iehmltym

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML_CSS/JS交互_查漏补缺_20230422

div” 全称为 “division” ，直译“区块”、“分块”，作用是将页面内容分块，便于样式设置和JS操作。可使用 CSS 样式为 div 元素添加背景、边框、阴影等效果，增加页面的美观度和易读性。在表单元素中，name 属性与 value 属性一起使用，用于在提交表单时将表单数据发送到服务器。-name 属性常用于form表单元素、name 锚点Anchor和 iframe 等。input 标签的按钮和button标签的按钮异同。-name属性的用于为HTML该元素命名。id、内边距、背景、边框。
复制链接

扫一扫