HTML 表单详细介绍

最新推荐文章于 2024-05-04 18:25:26 发布

芋圆不想圆

最新推荐文章于 2024-05-04 18:25:26 发布

阅读量3k

点赞数 5

文章标签： html5 前端

本文链接：https://blog.csdn.net/m0_52900946/article/details/123665163

版权

表单主要用于填写信息，由许多表单控件组成的，主要包括用户填写信息部分和表单的提交按钮，用户填写数据完成后，单击“提交”按钮就可以发送数据到服务器，经过后台处理后将用户所需的信息返回到客户端，在浏览器中展示给用户，表单内容由<form> </form>包含

1、表单常用属性

1.1 `action`属性

指定表单提交表单时向何处发送数据，即需要发送的服务器地址

<form action="form.php">
     各种表单控件
</form>

1.2 `method`属性

用于指定表单向服务器提交数据的方法，包括两种方法，分别是get和post

1）get方法

使用URL传递参数，传递参数的数据量有限，只能传递少量数据

传递参数：http://服务器地址?name1=value1&name2=value2，其中“?”符号表示要进行参数传递，“?”符号后面采用“name=value”的形式传递，多个参数之间，用“&”符号连接。

注意使用URL传递参数的时候并不安全，所有信息可在地址栏看到，并且可以通过地址栏随意传递到其他数据。

2）post方法

将数据封装后使用http请求，信息在地址栏不可见，比较安全，并且传递的数据量理论上没有限制，所以，虽然get是表单提交的默认方法，但通常采用post方法传递数据

<form action="" method="post">
     各种表单控件
</form>

2、enctype属性

指定表单发送编码的方式，只有method=“post”时生效，有三种属性值

2.1`application/x-www-form-urlencoded`

默认值

2.2`multipart/form-data`

不对字符编码，用于上传文件的时候使用

2.3`text/plain`

将空格转换成“+”，但不编码特殊字符，通常在将表单发送到电子邮箱时使用

3、input常用属性

3.1 `type`属性

表示输入框的类型，默认值是text

<body>
    <input type="text">
</body>
<!-- 下图为浏览器中的样式 -->

请添加图片描述

3.2 `name`属性

表示输入框中的名称，因为传递数据时，使用“name=value”的形式传递，所以一般情况下必填

3.3 `value`属性

表示输入框的默认值

<body>
    <form action="">
        <input type="text" value="输入内容：">
    </form>
</body>
<!-- 下图为浏览器中的样式 -->

请添加图片描述

3.4 `placeholder`属性

表示输入框中的提示信息，当输入框中有value属性时，提示内容就会消失，显示为value的属性值

<body>
    <form action="">
        <input type="text" placeholder="未输入内容">
    </form>
</body>

在这里插入图片描述

3.5 `input`元素的其他属性

1）checked=“checked”

默认被选中

2）disabled=“disabled”

设置控件不能使用，在按钮效果上不能单击，在输入框上则表示不能修改，而且设置这个属性后，输入框的信息不能往后台传递

4、`type`属性值

4.1 `type=password`

在此输入框输入信息时显示为保密字符

<body>
    <form action="">
        <input type="password" placeholder="未输入内容">
    </form>
</body>
<!-- 浏览器显示如下图所示 -->

请添加图片描述

4.2 `type=file`

BBS上传图片，在EMALL中上传附件时一定少不了的东西

提供了一个文件目录输入的平台，参数有name，size

<body>
    <form action="">
        <input type="file" placeholder="未输入内容">
    </form>
</body>

请添加图片描述

4.3 `type=hidden`

通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候在页面中看不到hidden在哪里，最有用的是hidden值

4.4 `type=button`

标准的windows风格的按钮，要让按钮跳转到某个页面上还需加入写JavaScript代码

4.5 `type=checkbox`

多选框，常见于注册爱好。性格、等信息。参数有name、value及特别参数checked（表示默认选项）

最重要的还是value值，提交到处理页的也就是value(附：name值可以不一样，但不推荐）

<body>
    <form action="">
        <input type="checkbox">读书
        <input type="checkbox">唱歌
        <input type="checkbox">跳舞
    </form>
</body>

请添加图片描述

4.6 `type=radio`

即单选框，出现在多选一的界面设定中。参数同样有name，value及特别参数checked。不同于checkbox的是，name值一定要相同，否则就不能多选一。提交到处理页也还是value值

<body>
    <form action="">
        <input type="radio">读书
        <input type="radio">唱歌
        <input type="radio">跳舞
    </form>
</body>
<!-- 此时没有设置name值，可以多选 -->

请添加图片描述

 <form action="">
        <input type="radio" name="1">读书
        <input type="radio" name="1">唱歌
        <input type="radio" name="1">跳舞
    </form>
<!-- 此时name值相同，只能多选一 -->

请添加图片描述

4.7`type=image`

可以作为提交式图片

<body>
    <form action="">
        <input type="image" src="./img/2.png">
    </form>
</body>
<!-- 点击图片会提交刷新页面 -->

请添加图片描述

4.8 `type=submit 和type=reset`

分别是“提交”和“重置”两个按钮

submit主要功能是将Form中所有内容进行提交action页处理，reset则是快速清空所有填写内容的功能

5、其他表单元素

5.1 `select` 下拉可选择控件

可以创建一个下拉式列表或带有滚动条的列表，可以在列表中有一个或者多个选项，常用于填写出生日期和所在地区等信息

<form action="">
        今天是星期：
       <select name="week" id="">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="6">6</option>
       </select>
    </form>

请添加图片描述

1）`<select>`标签的属性

name=“列表名”：所有选项只有一个 name
multiple=“multiple”：设置 select 控件为多选，可在列表中使用 Ctrl 键+鼠标进行多
选。一般不用
size=“1”：规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于
列表中选项的总数目，下拉列表就会显示出滚动条，表示可以查看更多选项

2)`option`标签的属性

当选项option没有value属性值的时候，往后台传递的是该标签的文字，有属性值的时候，往后台传递的就是属性值的值
title=“”：鼠标指上后显示的文字
selected=“selected”：默认选中

3）`<optgroup>`标签分组

  <form action="form.php" method="post">
        <select name="city">
            <optgroup label="山东省">
                <option value="1" title="青岛">青岛</option>
                <option value="2" selected="selected">烟台</option>
                <option value="3">济南</option>
            </optgroup>
            <optgroup label="北京市">
                <option>海淀区</option>
                <option>朝阳区</option>
            </optgroup>
        </select>
    </form>

请添加图片描述

5.2 `textarea` 文本域

1）设置宽高

cols 规定文本域内可见的列数，rows 规定文本域内可见的行数，但这种方式并不常用。通常用 CSS 来规定其宽和高度，如：style=“width: 200px; height: 150px;”

2）readonly=“readonly”

设置为只读模式，不允许编辑

3）disable=“disable”

设置禁用文本域

4）style=“resize: none;”

设置宽高不允许拖放修改。

5）style=“overflow: hidden;”

设置当文字超出区域时通过overflow-x/overflow-y 分别设置水平或垂直方向的显示方式
overflow 有三个常用属性值：hidden 表示超出区域的文字，隐藏无法显示；scroll 表示无论有多少文字，均会显示滚动条；auto 表示自动，是默认情况，根据文字多少自动决定是否显示滚动条，当文本域中的内容没有超出范围时，滚动条呈灰色状。

  <form>
       <textarea style="width: 200px; height:150px"></textarea>
    </form>

请添加图片描述

芋圆不想圆

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
HTML 表单详细介绍

表单主要用于填写信息，由许多表单控件组成的，主要包括用户填写信息部分和表单的提交按钮，用户填写数据完成后，单击“提交”按钮就可以发送数据到服务器，经过后台处理后将用户所需的信息返回到客户端，在浏览器中展示给用户，表单内容由<form> </form>包含1、表单常用属性 1.1 action属性指定表单提交表单时向何处发送数据，即需要发送的服务器地址<form action="form.php"> 各种表单控件</form
复制链接

扫一扫