HTML5学习笔记-02-表单属性

最新推荐文章于 2024-07-08 18:14:28 发布

优雅哥cc

最新推荐文章于 2024-07-08 18:14:28 发布

阅读量8.2k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_43742708/article/details/107070234

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、fieldset + legend

<body>
    <form action="get" action="1.php">
        <fieldset>
            <legend>注册信息</legend>
            <input type="text">
        </fieldset>
    </form>
</body>

效果：
在这里插入图片描述

二、必须输入required 输入提示placeholder

<input type="text" name="title" required placeholder="请输入">

效果：
在这里插入图片描述

三、input 类型

3.1 password

在这里插入图片描述
在移动端 会调出安全键盘

3.2 email

3.3 url

3.4 tel

3.5 number

在移动端的时候，会弹出数字键盘

3.6 hidden

隐藏表单<type type="hidden"></type>隐藏表单检查

隐藏表单，不占用空间，可以提交到后台

效果：
在这里插入图片描述

3.7 下拉列表分组

<select name="category[]">
   <optgroup label="新闻">
       <option value="">新闻</option>
       <option value="">游戏</option>
   </optgroup>
   <optgroup label="娱乐">
       <option value="">吃饭</option>
       <option value="">睡觉</option>
   </optgroup>
</select>

效果：
在这里插入图片描述

3.8 file

文件上传需要在form上指定： enctype=“multipart/form-data”
多个文件上传需要指定：multiple name处需要加上 [] 号

<form action="1.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="images[]" multiple>
</form>

3.9 data

<input type="date">

在这里插入图片描述
在移动端使用此属性：
安卓机(OPPO r11s):

IPhoneX:

3.10 time 类型

<input type="time">

安卓机(OPPO r11s):
在这里插入图片描述
IPhoneX效果：

3.11 color

<input type="color"><br>

效果：
在这里插入图片描述

四、其他属性

4.1 maxlength 限制最大输入字符

4.2 readonly 只读

不能修改，可以提交到后台

4.3 disabled 禁用

不可修改，不能提交到后天

4.4 pattern 定义正则规则

<input type="text" pattern="[a-z]{5}" required>

解读：只能输入a-z 并且是5位
效果：
在这里插入图片描述

补充：oninvalid
HTML DOM oninvalid事件（input元素内的值为无效值时触发的事件）

<input type="text" pattern="[a-z]{5}" required oninvalid="invalid('用户名只能是英文,且只有五位')">
<input type="submit">

<script>
    function invalid(msg){
        alert(msg);
    }
</script>

解读：当输入的值不匹配，且点击提交时会触发 oninvalid事件弹出警告框
在这里插入图片描述

4.5 多值提交，在name上加 []

在这里插入图片描述

效果：

4.6 自定义列表 datalist

<input type="text" list="lesson">
<datalist id="lesson">
    <option value="mysql"></option>
    <option value="js">脚本语言</option>
    <option value="css">层叠样式表</option>
</datalist>

效果:
在这里插入图片描述

4.7 信息栏效果 fieldest lgend

<fieldset>
    <legend>注册信息</legend>
    <input type="text" name="title" required placeholder="请输入">

    <button>提交</button>
</fieldset>

效果：
在这里插入图片描述

4.8 打开或关闭历史记录 autocomplate

<form action="" autocomplete="off">
    <fieldset>
        <legend>注册信息</legend>
        <input type="text" name="title" required placeholder="请输入">
    </fieldset> 
    <button>提交</button>
</form>