VS code简单应用——day03

一、音频
（1）应用格式：
<audio src=“音频地址” controls autoplay loop></audio>
（2）属性：

controls属代表控制条，布尔属性
loop属性代表是否循环播放，布尔属性
moted属性代表是否静音播放，布尔属性
autoplay属性代表是否自动播放，布尔属性

二、视频
（1）应用格式：
<video src=“视频地址” controls autoplay loop></video>
（2）属性：

controls属代表控制条，布尔属性
loop属性代表是否循环播放，布尔属性
moted属性代表是否静音播放，布尔属性
autoplay属性代表是否自动播放，布尔属性

三、表单-1
1.登录界面应用格式：(type=“text” 、type=“password”)

<body>
    <h3>登录表单</h3>
    <form action="#" method="GET">
        用户名：<input type="text" name="username" placeholder="手机号/邮箱/名称"><br>
        密码：<input type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="登录">
    </form>
</body>

浏览器中效果：
在这里插入图片描述
输入用户名密码，地址栏中效果：
这个时候的效果鼠标只有在文本框中点击时，用户才能输入信息，如果要实现用户鼠标点击“用户名”的时候，用户也能输入信息，就需要label表单组件把用户名包裹起来【注意要给文本框起一个id，label里的for属性里填写文本框的id】

代码如下：

<form action="#">
        <label for="usernameid">用户名：</label><input id="usernameid" type="text" name="username">
        <br>
        <label for="passwordid">密码：</label><input id="passwordid" type="password" name="password">
        <br>
    </form>

属性：

action 用于处理表单信息的应用程序的地址。
method 浏览器用来提交表单的HTTP方法。
get 对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔【method=“get”参数在地址栏中，注意给表单控件起名字】
post 对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。
name 设定表单的名称
target 表示浏览器接收到form的提交信息后在哪里显示回应。 ü_self，_blank，_parent，_top

2.性别单选按钮（type=“radio”）

<body>
    性别：
    <input id="maleid" type="radio" name="gender" value="male" checked><label for="maleid">男</label>
    <input id="famaleid" type="radio" name="gender" value="female"><label for="famaleid">女</label>
    <br>
</body>

浏览器中效果：
在这里插入图片描述
属性：

1.name：要使两个单选按钮有互斥行为，则两个单选按钮的name属性要相等
2. label：同样这里依然使用了label组件，使用户在点击"男"或者"女"的时候，能控制前面的单选按钮
3. checked ：默认选中的单选按钮，布尔属性

3.爱好复选框按钮（type=“checkbox”）

<body>
    爱好：
    <input type="checkbox" name="hobby" id="basketballid" value="basketball" checked>
    <label for="basketballid">篮球</label>

    <input type="checkbox" name="hobby" id="swimmingid" value="swimming" checked>
    <label for="swimmingid">游泳</label>

    <input type="checkbox" name="hobby" id="dancingid" value="dancing">
    <label for="dancingid">跳舞</label>
    <br>
</body>

浏览器中效果：
在这里插入图片描述
属性：

name：这里name属性值一样，但是依然可以选中多个
label：同样这里依然使用了label组件，使用户在点击"篮球"或者‘’游泳“”的时候，能控制前面的复选框
checked ：默认选中的单选按钮，布尔属性

4.图片上传（type=“file”）

<body>
    图片上传：<input type="file" name="file">
    <br>
</body>

浏览器中效果：
在这里插入图片描述

5.隐藏控件（type=“hidden”）【隐藏域，该组件不显示在页面中，但是其值会被提交。】

<body>
    隐藏控件: <input type="hidden" name="id" value="1001">
    <br>
</body>

浏览器中效果：
在这里插入图片描述
6.图片按钮（type=“image”）

<body>
    图片按钮：<input type="image" src="../images/1.jpg" width="100" height="200" alt="图片按钮">
    <br>
</body>

浏览器中效果：
在这里插入图片描述
7.普通按钮（type=“button”）
【这里给出两种方式写出按钮】

<body>
    普通按钮：<input type="button" value="普通按钮">
             <button type="button">普通按钮</button>
        <br>
</body>

浏览器中效果：
在这里插入图片描述
8.提交按钮（type=“submit”）
【这里给出三种方式写出按钮】

<body>
    提交按钮：
        <input type="submit" value="注册">
        <button type="submit">提交按钮</button>
        <button>提交按钮</button>
        <br>
</body>

浏览器中效果：
在这里插入图片描述
9.重置按钮（type=“reset”）

重置按钮：
        <input type="reset" value="重置">
        <button type="reset">重置</button>
        <br>

浏览器中效果：
在这里插入图片描述

来源：CSDN

作者：孤月儿

链接：https://blog.csdn.net/m0_46364332/article/details/104520096

标签

按钮

input

软件

label