HTML5-表单元素(Form-input元素)

最新推荐文章于 2024-10-01 13:04:00 发布

MelanceXin

最新推荐文章于 2024-10-01 13:04:00 发布

阅读量3.2k

点赞数 2

分类专栏： HTML+CSS+JS ASP.NET 文章标签： HTML5 表单元素 input

本文链接：https://blog.csdn.net/Q672405097/article/details/89496160

版权

ASP.NET 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS+JS

15 篇文章 0 订阅

订阅专栏

表单元素

表单：是HTML中获取用户输入的手段，对于web应用系统极其重要，但是HTML定义的功能落后于表单的使用方式已经有很多年了。
HTML5中，整个表单已经彻底改造过，标准的步伐已经跟上表单的应用实践。
（比如：百度的输入框是一个表单，网页中用户的的登陆框也是一个表单…）
获取用户输入的方式多样，对应的表单样式也多样。
关键表单元素

// 属性：method action （作用：创建一个表单） //Method 表示用于发送form-data的http方法 //Action 表示当提交表单时向何处发送表单数据 //属性：Type Name

1.单行文本框和多行文本框

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin Text_Test</title>
</head>
<body>
    <form>
        <!-- 单行文本框 input -->
        <input> 
        <br>
        <!-- 默认为 <input type="text"> input元素的属性目前拥有29种 -->
        <input type="text" value="admin"> 
         <!-- 属性：value 默认填充值（类似占位符） -->
        <br>
        <input type="text" placeholder="请输入用户名"> 
        <!-- 属性：placeholder 默认填充值（不占文本框中的内容） -->
        <br>
        <input type="text" placeholder="请输入用户名1" maxlength="20">   input type="text" placeholder="请输入用户名1" maxlength="20"
        <!-- 属性：maxlength 限制最大输入字符长度 -->
        <!-- (这里如果需要限制最小长度，则需要用到JavaScript进行辅助完成 ) -->
        <br>
        <input type="text" placeholder="请输入用户名2" size="10">   input type="text" placeholder="请输入用户名2" size="10"
        <!-- 属性：size 单行文本框长度，表示文本框能一次性显示出来的文本字符 -->
        <br>
        <input type="text" placeholder="请输入用户名3" readonly> 
        <!-- 属性：readonly 没有属性值 -->
        <br>
        <input type="password" placeholder="密码"> 
        <!-- 属性：type 属性值 password 默认用 ’*‘ 显示，但传递方式仍然是依靠明文进行传递 -->
        <!-- 多行文本框 textarea（在不同浏览器中显示方式可能会有不同展示效果） -->
        <br>
        <textarea rows="20"></textarea> 
        <!-- 属性：rows 表示20行 还有对应的属性 cols -->
    </form>
</body>
</html>

2.按钮

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin Button_Test</title>
</head>
<body>
    <form>
        <input type="button" value="按钮">
        <button>按钮</button>
        <!-- 同js合作，作为绑定事件  onClick="" -->
        <input type="submit" value="提交">
        <!-- submit提交表单，获取用户输入的值 -->
    </form>
</body>
</html>

分析：
1.原理来讲：button元素和type=“button”实际应用还是有区别的，button要比input按钮的功能多，button元素可以当任何按钮来使用，使用范围更广泛一些。
2.input button和input submit的区别：submit用于提交表单，使用范围比input button要小一些。
3.input btton通常用于和javascript一起使用并作为绑定事件处理。
4.input submit用于提交表单时，必须声明form里面的method属性，最好也添加action属性。

适用范围：button>input button>input submit

3.滑动条

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin Slider_Test</title>
</head>
<body>
    <form>
            <input type="range">   
            <!-- 表示滑动条效果，通常不同浏览器显示效果不同 -->
            <input type="range" min="-100" max"500" step="100" >     
            <!-- 最小值为-100，最大值为500  step表示滑动最小单位100 -->
            <input type="range" min="-100" max"500" step="100" value="100" >     
            <!-- value设置默认值 -->
    </form>
</body>
</html>

4.只接受数字的输入框

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin NumberInput_Test</title>
</head>
<body>
    <form>
        <input type="number">
        <!-- 表示只接收数字的输入框（手动输入，通常用于表示出生日期等），通常不同浏览器显示效果不同 -->
        <input type="number" min="-100" max="100" value="0">
        <!-- 最小值为-100，最大值为100,默认值为0 -->
    </form>
</body>
</html>

5.复选框和单选框

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin CheckBoxAndRadio_Test</title>
</head>
<body>
    <form>
        <!-- 复选框-->
        <input type="checkbox">复选框
        <!-- 表示复选框，（用于表单中时，只有勾选上才会随表单提交到服务器） -->

        <!-- 单选框-->
        <input type="radio">单选框
        <!-- 表示单选框（实现时将需要做分组处理） name 相同的为同一组 -->
        <input type="radio" name="a" checked>选择1
        <!-- checked 设置为默认选中 -->
        <input type="radio" name="a">选择2
    </form>
</body>
</html>

6.选项列表输入框

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin SelectInput_Test</title>
</head>
<body>
    <form>
        你最喜欢的水果是什么？
        <select>
            <!-- 表示选项列表（只能选择列表中的内容） -->
            <option>西瓜</option>
            <option>香蕉</option>
            <option>菠萝</option>
        </select>
    </form>
</body>
</html>

页面（Google Chrome 版本号71.0.3578.98）中显示效果
在这里插入图片描述
在这里用到的选项列表输入框适用于，用户可以选择给出的列表中的信息，但不能自己进行输入。
这里就需要用到 datalist（用户可以从列表中选择信息，也可以自行输入）

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin DatalistInput_Test</title>
</head>
<body>
    <form>
        你最喜欢的水果是什么？
        <input type="text" list="datalist1">
        <!-- datalist必须配合文本框使用，属性list中填写datalist对应的id值。 -->
        <datalist id="datalist1">
            <option>西瓜</option>
            <option>香蕉</option>
            <option>菠萝</option>
        </datalist>
    </form>
</body>
</html>

在这里插入图片描述
datalist 和 select的差别： datalist 可以手动输入列表中没有的元素。

7.文件导入框

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin FileInput_Test</title>
</head>
<body>
    <form enctype="mutipart/formdata">
        <input type="file"> 
        <!-- 表示提交文件，不同浏览器中显示效果不同 -->
        <input type="file" multiple>
    </form>
</body>
</html>

type="file"有两个属性
Multiple 一次允许上传多个文件
Required 必须上传一个文件

同时需要注意的是，在使用表单提交文件时，需要设置如下内容

<form enctype="mutipart/formdata"></form>

8.图片按钮

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin List_Test</title>
</head>
<body>
    <form>
        <input type=“img” src="image.png">
        <!-- 表示图片按钮	（在浏览器中是可以进行点击的，同时能获取到鼠标点击位置x,y坐标） -->
        <input type=“image” src="image.png" width="40px">
        <!-- 属性：width表示宽度    -->
    </form>
</body>
</html>

9.其他类型

在使用html5的过程中，还会涉及到一些其他的input类型，比如隐藏数据项，获取时间，获取颜色，判断邮箱格式等等…

<!DOCTYPE html>
<html>

<head>
    <meata charset="UTF-8" />
    <title>MelanceXin OtherInput_Test</title>
</head>

<body>
    <form>
        <!-- 这个识别目前用处不大，使用较少 -->
        <input type="email">
        <!-- 表示是否识别是邮箱 -->
        <input type="tel">
        <!-- 表示是否识别是号码 -->
        <input type="url">
        <!-- 表示是否识别是url -->
        <input type="date">
        <!-- 表示时间	（用于表示时间）		不同浏览器显示效果差别较大 -->
        <input type="color">
        <!-- 表示获取颜色值 -->
        <input type="search">
        <!-- 表示搜索框 -->
    </form>
    <form>
        <input type="hidden" value="123">
        <!-- 生成隐藏的数据项，存在在html中，但是不显示出来，可以随着表单一起提交 -->
    </form>
</body>

</html>