网站（六）HTML5表单元素（中）

最新推荐文章于 2023-12-12 09:47:43 发布

KeithAlexander

最新推荐文章于 2023-12-12 09:47:43 发布

阅读量192

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/KeithAlexander/article/details/80959007

版权

学习笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

HTML表单元素

button：按钮类，和input同一等级
input button：input属性button
input submit：js合作并且作为绑定事件处理
适用范围：button>input button>input submit
range：数字滚动，最小值min，最大值max，步长step，初始值value
number：数字输入，属性同上
CheckBox：可自我取消的选项
radio：不可自我取消的选项，name相同的radio们只能选一个，checked为默认选项
select：只能选择，不可添加
datalist：可以添加，但必须配合单行文本框使用。datalist的id和input的list值必须相同。
option：以上两者共同的选项

<!DOCTYPE html>  <!--让浏览器得知自己要处理的内容是html--> 
<!--这是注释-->

<html len="zh"><!--文档中html部分的开始， language = 简体中文-->

<head><!--提供有关文档内容和标注信息的-->

    <meta charset="UTF-8"><!--用UTF-8的方式将网页进行编码-->

    <title>CreateForm</title><!--标题-->
</head>

<body>
<form>
    <input type="button" value="Button">
    <button>Button</button> <!--js合作并且作为绑定事件处理-->
    <input type="submit" value="submit">

    <br><br>
    <input type="range" min="-100" max="100" step="100"> <!--数字滑动-->
    <input type="range" min="-100" max="100" step="100" value="-100"> 

    <br><br>
    <input type="number" min="-100" max="100" value="-50" step="5"> <!--数字输入-->

    <br><br>
    <input type="checkbox">Choice1 <!--可自我取消的选项-->

    <br><br>
    The most handsome programmer is:
    <input type="radio" name="Keith" checked>Keith <!--不可自我取消的选项，name相同只能点一个，checked为默认-->
    <input type="radio" name="Keith">Keith
    <input type="radio" name="Keith">Keith

    <br><br>
    Your favorite fruit:
    <select> <!--只能选择-->
        <option>Apple</option>
        <option>Banana</option>
        <option>Watermelon</option>
    </select>

    <input type="text" list="fruit"> <!--可以添加-->
    <datalist id="fruit">
        <option>Apple</option>
        <option>Banana</option>
        <option>Watermelon</option>
    </datalist>

</form>
</body>
</html>