5.2-第五章-表单-第二节-input表单元素详解-单标签-重要属性-type-的72变

最新推荐文章于 2024-01-20 18:13:49 发布

say hi.

最新推荐文章于 2024-01-20 18:13:49 发布

阅读量758

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/107811409

版权

表单元素中使用最广泛的(表单控件)元素–input元素

input

input是一个单标签元素，其属性type代表了input的表单类型，input标签就是通过type属性的不同取值来定义不同的表单控件。72变-孙悟空 type

1.单文本框(type=“text”)：可以输入一行文本的表单控件
例如：

用户名：

密码：

**name属性也非常常用和重要，代表这个表单，比如说输入框这个属性啊，它最终传送到后端的时候，是以一种key value 的形式，那么 name =的值(user) 就相当于 key value 值呢，就是用户输入框中的文字**

2.单选按钮(type=“radio”)：具有相同name属性的单选按钮只能选择一个
例如：

3.多选按钮(typt=“checkbox”)：可以选中多个的选择框
例如：

4.按钮(type=“button”)：普通按钮
例如：

5.提交按钮(input type=“submit”)：会触发将表单数据提交到服务器的功能
例如：

6.重置按钮(type=“reset”)：会清除表单（一个还是所有框？答：所有的全部清除）中的所有数据，恢复表单中的原始值
例如：

7.文件上传按钮(type=“file”)：用于文件上传
例如：

练习例子：：
radio和checkbox 没有value时的 url ：
https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent&user=%E6%B5%81%E5%9F%9F&pwd=12345&phone=on&part=on&part=on

手机： p40手机mate40

配件：无线耳机充电宝

radio和checkbox 有value时的 url ：
https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent&user=%E6%B5%81%E5%9F%9F&pwd=12345&phone=m40&part=2
https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent&user=zhang&pwd=123&phone=p40&part=1&part=2

手机： p40手机mate40

    </div>
    <!-- 多选框-->
    <div>配件：<input type="checkbox" value="1" name="part"  />无线耳机<input type="checkbox" value="2" name="part" />充电宝</div>

例子：：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>input</title>
</head>
<body>
    <form action="https://www.huawei.com" method="get">
        <div>购买手机</div>
        <div>用户名：<input type="text" name="user" /></div>
        <div>密码：<input type="password" name="pwd" /></div>
        <!-- 单选按钮 -->
        <div>手机：<input type="radio" name="phone" id="p" value="p40"/><label for="p">p40手机</label><input type="radio" name="phone" value="m40"/>mate40
            <!-- 添加<label for="">  </label> 标签，使得，点击文字的时候，单选按钮也能被选中;可点击区域变大了，方便用户体验感;
                对应的要在，input 上加上 id=""   
                           label 上加上 for=""   -->
            
        </div>
        <!-- 多选框-->
        <div>配件：<input type="checkbox" value="1" name="part"  />无线耳机<input type="checkbox" value="2" name="part" />充电宝</div>
        <!-- value="按钮的文案显示" -->
        <div><input type="submit" value="提交"></div>   
    </form>
    
</body>

</html>

say hi.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.2-第五章-表单-第二节-input表单元素详解-单标签-重要属性-type-的72变

表单元素中使用最广泛的(表单控件)元素–input元素inputinput是一个单标签元素，其属性type代表了input的表单类型，input标签就是通过type属性的不同取值来定义不同的表单控件。72变-孙悟空 type1.单文本框(type=“text”)：可以输入一行文本的表单控件例如：用户名：name属性也非常常用和重要，代表这个表单，比如说输入框这个属性啊，它最终传送到后端的时候，是以一种key value 的形式，那么 name 值就相当于 key value 值呢，就是
复制链接

扫一扫