前端学习——HTML表单

木亚萱

于 2024-09-04 22:22:27 发布

阅读量178

点赞数 2

文章标签：前端学习 html

本文链接：https://blog.csdn.net/2301_80391855/article/details/141904539

版权

一、概念

表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框等。

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件。

action：服务器地址
name：表单名称
method：有get和post两个值
这两个值的区别是数据提交方式的不同：get把提交的数据url可以看到，post看不到；get一般用于提交少量数据，post用来提交大量数据。

一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。

form：表单元素

input：输入（注意它是单标签）

input中的type（表单类型）若是text，则是只出现输入框；type若是submit，则会出现一个提交按钮。

例一：

<form >
        <input type="text">
</form>

网页会出现一个输入框，显示如下：

例二：

<form>
        <input type="text">
</form>
<form >
        <input type="submit">
</form>

网页会出现一个提交的按钮，如下：

按钮也可以用button表示：

    <form>
        <input type="text">
    </form>
    <form >
        <input type="submit">
    </form>
    <button>按钮</button>

则显示如下：

具体实践中，会涉及到文本框、密码框、提交按钮这些部分。

文本域通过 <input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

密码框中的密码字段通过标签<input type="password”>来定义。输入时密码会变成默认的粗体黑色原点。

提交按钮通过<input type="submit">来定义，默认出现“提交”字样，如果想替换文字，可以使用value来操作。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

举例，要求输入包含文本域和密码框和按钮，如下：

    用户名：<input type="text">
    <br>
    密码：<input type="password">
    <br>
    <input type="submit" value="登录">

显示结果如下：

关注