C4、表单

最新推荐文章于 2024-08-15 09:06:25 发布

Robin_Hood_

最新推荐文章于 2024-08-15 09:06:25 发布

阅读量233

点赞数

分类专栏： HTML5前端学习笔记

本文链接：https://blog.csdn.net/Rocarrot/article/details/80307653

版权

HTML5前端学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

C4、表单

一、什么是表单

专门用来收集用户信息的叫做表单。

二、表单的格式input

<form>
    <input type="text"> //input标签有很多属性选择，决定他的语义
    <input type="password" value="123">//密文输入框,value是默认值
    <input type="radio" checked="checked">  //单选框默认情况不互斥，要想互斥，给每个单选框设置name属性，name属性还必须是相同值，单选框默认选中，加入checked属性
    <input type="checkbox" checked="checked">//多选框，可以选中多个
</form>

三、表单的格式按钮

<form action="提交的服务器">
    <input type="button" value="我是按钮" onclick="js代码">  //按钮功能
    <input type="image" src="" onclick="js代码">//定义图片按钮
    <input type="reset"> //重置表单数据,重置按钮用默认标题：重置
    <input type="submit">//提交，要指定提交的服务器，并指定提交的数据
    <input type="hidden">//隐藏域，不会展示，悄悄提交数据
</form>

四、label标签

<body>
<form action="">
    <label for="name">名字：</label>  //绑定名字和输入框，聚焦输入
    <input type="text" id="name">
    <label>名字<input type="text" id="name"></label>//还可以这样用
</form>

五、dalist标签

作用：给输入框绑定待选项
格式：<input type="text" list="cars"><datalist id="cars"> <option></option><datalist>

六、HTML5其他表单

兼容性不好，可以使用其他替代

七、非Input标签

select 标签

作用：用于定义下拉列表
格式:

<select>
    <option></option>
    <option></option>
    <option selected="selected"></option>
    <optgroup label="beijin">//用于分组
    </optgroup>
 </select>