HTML5-表单标签

最新推荐文章于 2024-05-14 22:39:54 发布

vivianlisunny

最新推荐文章于 2024-05-14 22:39:54 发布

阅读量603

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/vivianlisunny/article/details/73717546

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、什么是表单
表单就是专门用来收集用户信息的

二、表单元素
1、元素：在html中标签／标记／元素都是指html的标签
2、常见表单元素：
2.1、input标签：有一个type属性，这个属性有很多类型的取值，取值的不同决定了input标签的功能和外观

<form action="https://www.baidu.com/">
    <!--明文输入-->
    账号：<input type="text" name="aa"><br>

    <!--暗文输入-->
    密码：<input type="password" name="bb"><br>

    <!--输入默认值-->
    账号：<input type="text" value="hello"><br>

    <!--单选框-->
    性别：
    <input type="radio" name="xx">男
    <input type="radio" name="xx">女
    <input type="radio" name="xx" checked="checked">保密
    <!--注意点：
    1、默认情况下单选框不会互斥，想要单选框互斥必须给每个单选框添加一个name属性，且name属性值相同
    2、要想让单选框默认选中某个框子，需要给input标签添加一个checked属性
    3、若给多个单选框设置checked默认值，只会将设置默认的最后一个单选框设置默认
    -->

    <!--多选框-->
    <br>
    爱好：
    <input type="checkbox">篮球
    <input type="checkbox"checked="checked">足球
    <input type="checkbox" checked="checked">羽毛球
    <!--注意点：
    3、若给多个多选框设置checked默认值，那么这些多选框都会被设为默认
    -->

    <!--普通按钮：可以通过value属性来给按钮指定标题，配合js完成一些操作-->
    <input type="button" value="按钮">

    <!--图片按钮-->
    <input type="image" src="IMG_0739.JPG">

    <!--重置按钮:清空表单中已经填写好的数据-->
    <input type="reset" value="清空">
    <!--注意点：如果像改按钮上的"重置"默认标题，可通过value属性来修改-->

    <!--提交按钮:将表单中已经填写好的数据提交到远程服务器-->
    <input type="submit">
    <!--注意点：提交到服务器必须具备两个条件
    1、需要给form表单添加一个action属性，指定服务器地址
    2、需要给这个表单中想要提交的内容添加一个name属性,如账号／密码
    -->

    <!--隐藏域:配合提交按钮将一些数据悄悄的提交到服务器-->
    <input type="hidden" name="cc" value="yyy">

</form>

2.2、lable标签：默认情况下文字和输入框是没有关联关系的，也就是说点击文字输入框不会聚焦，如果想点击文字时让对应的输入框聚焦，那么就需要让文字和输入框进行绑定，可使用lable标签完成该绑定
绑定格式：1、将文字利用lable标签包裹起来
2、给输入框添加id属性
3、在lable标签中通过for属性和输入框中的id进行绑定即可

<form action="">
    <label for="account">账号:</label><input type="text" id="account"><br>
    <label for="pwd">密码:</label><input type="password" id="pwd"><br>
</form>

2.3、datalist标签：给输入框绑定待选项(众多浏览器不支持datalist标签，所以不常用)
如何给输入框绑定待选列表：
1、创建一个输入框
2、创建一个datalist列表
3、给datalist标签添加一个id
4、给输入框添加一个list属性，该list的值为datalist标签的id属性的值

 请输入你的车型：<input type="text" list="cars">

<datalist id="cars">
    <option>宝马</option>
    <option>奔驰</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>

2.4、select标签：用于定义下拉列表，下拉列表不能输入内容，只能从列表中选择;可以通过option标签添加一个select属性来指定列表的默认值；可以通过给option标签包裹一层optgroup标签来给下拉列表的数据进行分类

<select>
    <optgroup label="北京">
        <option selected="selected">朝阳区</option>
        <option>昌平区</option>
        <option>通州区</option>
    </optgroup>

    <optgroup label="广州">
        <option>天河区</option>
        <option>越秀区</option>
    </optgroup>
</select>

2.5、textarea标签：定义一个多行输入框;默认情况下输入框可以无限换行，有自己的宽高，可通过cols和rows来指定输入框的宽高，但是还是可以无限往下输入；默认情况下输入框是可以手动拉伸的

<textarea cols="2" rows="5"></textarea>

小练习：

<body>
<form action="https://www.baidu.com/">
    <p>
        账号:<input type="text" name="account">
    </p>

    <p>
        密码:<input type="password" name="pwd">
    </p>

    <!--注意点：单选框和多选框指定的name值要一样-->
    <p>
        性别:
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender" checked="checked">保密
    </p>

    <p>
        爱好：
        <input type="checkbox" name="sport">篮球
        <input type="checkbox" name="sport">足球
        <input type="checkbox" checked="checked" name="sport">羽毛球
    </p>

    <p>
        简介：
        <textarea cols="30" rows="10" name="desc"></textarea>
    </p>

    <p>
        生日：
        <input type="date" name="date">
    </p>

    <p>
        邮箱：
        <input type="email" name="email">
    </p>

    <p>
        电话：
        <input type="number" name="phone">
    </p>

    <p>
        <input type="submit" value="注册">&nbsp;&nbsp;&nbsp;
        <input type="reset" value="清空">
    </p>

</form>
</body>

vivianlisunny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-表单标签

一、什么是表单表单就是专门用来收集用户信息的二、表单元素 1、元素：在html中标签／标记／元素都是指html的标签 2、常见表单元素： 2.1、input标签：有一个type属性，这个属性有很多类型的取值，取值的不同决定了input标签的功能和外观<form action="https://www.baidu.com/">  账号：<i
复制链接

扫一扫

专栏目录