学习HTML第四课

前言

感谢大家的支持，今天我们还是继续一起学习HTML的知识吧！今天我们一起来学习HTML中的表单

标签学习

form

input

form标签

forn标签的作用于为用户输入创建 HTML 表单

<form></form>

input标签

input标签的作用是在表单建立一个简单的输入框

<input>

text标签

text标签是文本框控件

请输入用户名：<input type="text">

password标签

password标签是密码框控件

请输入密码：<input type="password">

textarea标签

请输入详细地址：
        <textarea name="" id="" cols="30" rows="10"></textarea><!-- cols指定文本区的可见宽度，rows指定文本区的可见行数 -->

radio标签

radio标签是单选控件

选择性别:<input type="radio" name="xingbie" checked>男
        <input type="radio" name="xingbie">女

checkbox标签

checkbox标签是多选控件

前端基础包括:<input type="checkbox" checked>HTMl
        <input type="checkbox">CSS
        <input type="checkbox">JS

checked标签

checked标签的作用是默认选中该选项，在前面radio标签和checkbox标签中我们都已经展示出来了

select标签

select标签是下拉菜单控件

<select></select>

option标签

option标签是select标签的子标签，select标签包含一个或多个option子标签

出生日期:
        <select>
            <option value="">1991</option>
            <option value="">1992</option>
            <option value="">1993</option>
            <option value="">1994</option>
            <option value="">1995</option>
            <option value="">1996</option>
            <option value="">1997</option>
            <option value="">1998</option>
            <option value="">1999</option>
        </select>

value标签

value标签的作用是在控件中给定一个默认值

您的手机号: <input type="text" value="150****0000"><!-- value=""的作用是在控件中给定一个默认值 -->

selected标签

selected标签作用是设置默认选项

出生日期:
        <select>
            <option value="">1991</option>
            <option value="">1992</option>
            <option value="">1993</option>
            <option value="">1994</option>
            <option value="">1995</option>
            <option value="">1996</option>
            <option value="" selected>1997</option>
            <option value="">1998</option>
            <option value="">1999</option>
        </select>

multiple标签

multiple标签可以选择多个选项

<select name="" id="" multiple size="8">
            <option value="">音乐</option>
            <option value="">电影</option>
            <option value="">短视频</option>
            <option value="">盲盒</option>
            <option value="">漫画</option>
            <option value="">小说</option>
            <option value="">前端</option>
        </select>

file标签

file标签是选择文件控件

附件:<input type="file">

label标签

label标签的作用是使控件得到焦点

<label for="1">请输入用户名：</label><input type="text" id="1">
        <!-- label标签的for=""属性里填写需要得到焦点的控件id="" -->

readonly标签

readonly标签是只读控件，在只读控件中不能添加和更改内容,但是可以复制只读控件中的内容。

您的手机号: <input type="text" readonly value="150****0000"><!-- value=""的作用是在控件中给定一个默认值 -->

disabled标签

disabled标签是禁用标签

选择性别: <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender" disabled>保密

fieldset标签

fieldset标签是分组控件

<fieldset>
        <legend>基础信息</legend>
        用户名: <input type="text">
        <br>
        密码: <input type="password">
    </fieldset>

legend标签

legend标签起标题作用

<legend>基础信息</legend>

submit标签

submit标签为提交按钮

姓名: <input type="text" name="" id="" target="_self"><!-- target="_self"或target="_blank"的作用是保留控件中填写的内容 -->
        <br>
        邮箱: <input type="text">
        <br>
        <input type="submit">

reset标签

reset标签为重置按钮

姓名: <input type="text" name="" id="" target="_self"><!-- target="_self"或target="_blank"的作用是保留控件中填写的内容 -->
        <br>
        邮箱: <input type="text">
        <br>
        <input type="reset">

button标签

button标签为普通按钮

<input type="button" value="普通按钮">

image标签

image标签为图片

<input type="image" src="">

button标签

button标签是双标签，双标签button按钮在form中默认具备点击提交表单的功能

<button>button按钮</button>

总结

今天我们的关于表单的html学习就到这里啦，欢迎大家接着来和我一起学习html知识，今天就先这样啦！！！