前端入门：HTML（表单）

一、文本框和密码框

案例：

源代码：

1.单行文本框

input输入框type属性默认就是单行普通文本框

  <form action="">

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

        <br>

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

    </form>

2.多行文本框

会产生一个方框，当输入内容过多的时候会产生滚轮，上下移动着查看。

cols是输入框的宽度，rows是输入框的行数，为了更美观，需要运用CSS进行操作

案例：

源代码：

<form action="">

    <!-- 多行文本框 -->

        请输入详细地址：

        <textarea cols="10" rows="3"></textarea>

    </form>

二、单选和多选按钮类型

type两种类型，radio单选，checkbox多选

checked：可以控制在页面打开的的时候就默认选择包含这个属性的选项

1.单选

需要设置name属性，当没有设置name属性的时候，会默认每个单选框自称一组，一旦选择了这个文本框，向要通过点击来解除选中状态就做不到了，这时可以一次选多个。

案例：

源代码：

<form action="">

<!-- 单选 -->

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

                  <input type="radio" name="gender">女

        <!-- 换行 -->

        <br>

</form>

2.多选

案例：

源代码：

<form action="">

 <!-- 多选 -->

        前端基础包括：<input type="checkbox" checked>HTML

                     <input type="checkbox" >CSS

                     <input type="checkbox" >CSS

</form>

三、表单下拉控件

select标签中，只能放一个或者多个option标签，selected这个标签可以设置默认打开时的选项。

1.单选

案例：

源代码：

 <form action="">

        出生日期：

        <select>

            <option value="">1991</option>

            <option value="">1992</option>

            <option value="">1993</option>

            <option value="">1994</option>

            <option value="" selected>1995</option>

            <option value="">1996</option>

            <option value="">1997</option>

            <option value="">1998</option>

            <option value="">1999</option>

        </select>

    </form>

2.多选

multiple代表的是单选，size可以控制显示选项的长度。

案例：

源代码：

    <form action="">

        <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>

            <option value="">盲盒</option>

        </select>

    </form>

四、文件选择组件

主要是来选择本地的某些文件，并且用不同的浏览器打开，效果也会有所不同，还不能实现真正的文件上传，后续会学习。

当在本机中选择完文件后，会显示选择文件的名字

案例：

源代码：

 <form action="">

        附件：

        <input type="file">

    </form>

五、label标签和只读禁用属性

1.label标签

当鼠标点击一个标题文本或者一个输入框时，输入框会有一个小竖条闪动，也就是说获得了焦点。

for属性：用来定义与label关联的表单控件，它的值为id属性的值，id属性的值具有唯一性

案例：

源代码：

<form action="">

        <label for="username">请输入用户名：</label>

        <input type="text" id="username">

    </form>

2.只读文本框，不可以修改和删除里面存在的内容，但是可以复制里面的文本内容

案例：

源代码：

您的手机号：<input type="text" value="155*****000" readonly>

3.禁用:选择的按钮为灰色，用户不能点击后选中

案例：

源代码：

   选择性别：<input type="radio" name="gender">男

            <input type="radio" name="gender">女

            <input type="radio" name="gender" disabled>保密

六、带有边框和标题的表单控件

案例：

源代码：

<fieldset>

        <!-- 边框的标题 -->

        <legend>基础信息</legend>

        用户名：<input type="text">

        <br>

        密码：<input type="password">

    </fieldset>

七、表单按钮

按钮分类：提交按钮，重置按钮，普通按钮，图像按钮，双标签button按钮

value:这个属性可以设置按钮的名称

1.提交按钮

作用：具有点击提交信息同时发送表单数据给后台的功能

当点击提交按钮之后，会发生三件事情：

a.页面刷新了 原因：点击提交按钮后，数据提交给了网站的后台服务器,后台服务器将数据保存到数据库中，这里的服务器会给网页的表单提供一个访问地址

b.输入框的内容消失了

c.浏览器地址栏里多了一个问号

action=“ ”:填写的是地址，就是需要将数据提交到哪一个部分的地址，这个地址需要问后端要，如果没有这个属性，默认会提交到当前页面中，作为响应，当前页面会再打开一个页面，所以会刷新。也可以随便写一个地址来做测试，但是并不会真的提交到人家数据库中，还得需要对方同意才行。

也可以不让页面刷新，添加一个target属性值，可以是_self或者_blank，前者是在本页面上打开一个页面，后者是再打开一个空白页面。

案例（提交后打开一个新页面，且原内容不会被刷新掉）：

源代码：

 <form action="https://www.baidu.com" target="_blank">

        姓名：<input type="text">

        <br>

        邮箱：<input type="text">

        <br>

        <input type="submit" value="注册">

    </form>

2.重置按钮

<input type="reset" value="危险别点我">

3.普通按钮

这个按钮没有什么具体功能，也可以通过value设置名字

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

4.图像按钮

只是用图像来代替按钮，src为图片地址

<input type="image" src="E:\学习前端\one.png">

5.双标签button按钮

默认具有添加表单的功能，如果给他type属性，设置为button就变成普通按钮

<button>button按钮</button>