HTML的使用（中）-CSDN博客

本文链接：https://blog.csdn.net/weixin_74141222/article/details/138836990

文章目录

前言
一、HTML表单是什么？
二、HTML表单的使用
- （1）<form>...</form>表单标记
- （2）<input>表单输入标记
总结

前言

在许多网页平台上浏览，大多逃不了登录账号。此时在网页中填写的用户名文本框与密码文本框，就属于HTML的表单元素。

一、HTML表单是什么？

HTML的表单是指一种用来收集用户输入信息的HTML元素。它可以包含各种输入字段，如文本框、复选框、单选按钮、下拉菜单等。

表单通常被用于提交数据给服务器进行处理，用户输入的数据可以用于搜索、订阅、登录等功能。当用户提交表单时，表单数据将被发送到服务器，并且服务器可以进行相应的处理，例如存储数据、发送电子邮件、生成报告等。

通过使用HTML表单元素，开发人员可以创建交互式的网页，并与用户进行数据交互。

二、HTML表单的使用

（1）<form>...</form>表单标记

表单标记，以<form>开头，以</form>结尾。在表单标记中可以处理表单数据程序的URL地址等信息。

语法：

<form action="url" method=" get | post " name="自定义" onSubmit="" target="">

<form>标记的各属性的说明：

action属性：指定处理表单数据的程序的URL地址。

表单数据会被发送到指定的URL，并由对应的程序进行处理。处理程序可以是一个服务器端的脚本、一个API接口，或者任何能处理表单数据的程序。

method属性：指定数据传送到服务器的方式。两种属性值，get和post。

get属性值表示将输入的数据追加在action指定的地址后面，并传送到服务器。当属性值为post时，会将输入的数据按照HTTP协议中的post输出方式传送到服务器。

name属性：指定表单的名称，该值可自定义。

onSubmit属性：指定当用户点击提交按钮时触发的事件。

target属性：指定链接的打开方式。其属性值可以设置为：_blank、_self、_parent和_top。

_black属性表示在新窗口或新标签页中打开链接（新html文件），不会切换当前窗口。

_parent属性表示在父窗口中打开链接（新html文件），适用于嵌套框架的页面。

_self属性表示在当前窗口中打开链接（新html文件），替换当前页面。

_top属性表示最顶层的窗口中打开链接（新html文件），如果页面有框架，则在整个页面中显示链接内容。

实操展示：

<form id="form1" name="Myform" method="post" action="action.html" target="_black">

（2）<input>表单输入标记

表单输入标记是使用最频繁的表单标记，通过该标记可以向页面添加单行文本、多行文本、按钮等组件。注意的是：<input>表单输入标记嵌套在<form>表单标记中。

语法：

<input type="" disabled="disabled" checked="" width="" height="" maxlength=""
readonly="" size="" src="" usemap="" alt="" name="" value="">

表1.1 <input>标记的属性
属性	功能描述
type	用于指定添加的是哪种类型的输入内容，共有10个可选值，如表1.2所示
disabled	用于指定输入字段不可用，即字段变灰。其属性值可空，可为disabled
checked	用于指定输入字段是否处于被选状态，用于type属性值为radio和checkbox的情况下。其属性值可空，可为checked
width	用于指定输入字段的宽度，用于type属性值为image的情况下
height	用于指定输入字段的高度，用于type属性值为image的情况下
maxlength	用于指定输入字段的最多个数，用于type属性值为test和password的情况下，默认没有字数限制。
readonly	用于指定输入字段是否为只读。该属性值可为空，也可为readonly
size	用于指定输入字段的宽度，用于type属性值为test和password的情况下，以文字个数为单位，当type属性为其他值时，以像素为单位
src	用于指定图片的来源，只有当type属性为image时有效
usemap	为图片设置热点地图，只有当type属性为image时有效。属性值为URI，URI格式为"#+<map>标记的name属性值"。例如，<map>标记的name属性值为Map，该URI为#Map
alt	用于指定图片无法显示时显示的文字，只有当type属性为image时有效
name	用于指定<input>标记的名称，自定义
value	用于指定输入字段默认的数据值，当type属性为checkbox和radio时，此属性必填，所填即为选项内容；type值为其他值时，该属性值可忽略。当type属性为button、reset和submit时，该属性值指定按钮上的显示文字。

type属性是<input>标记中的重要内容，决定了表单输入数据的类型。

该属性值的可填项如下表所示：

表1.2 type属性的属性值
可填值	功能描述
text	文本框
password	密码框
file	文件域
radio	单选按钮
checkbox	复选框
submit	提交按钮
reset	重置按钮
button	普通按钮
hidden	隐藏域
image	图片域

以上，我们综合<form>表单标记、<input>表单输入标记、type属性值，进行实操展示：

<html>
    <head>
        <title>Demo</title>
    </head>
    <body><form action="" method="post" name="myform">
      &nbsp;&nbsp;&nbsp;用户名：<input name= "username" type="text" id="userName4" maxlength="20">
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20">
        <br>
        确认密码：<input name="pwd2" type="password" id="PWD15" size="20" maxlength="20">
        <br>
        性别：<input name="sex" type="radio" class="noborder" value="男" checked>
            男 &nbsp;
              <input name="sex" type="radio" class="noborder" value="女">
            女
        <br>
        爱好：<input name="basketball" type="checkbox" id="habit1" value="篮球">
            篮球
              <input name="guitar" type="checkbox" id="habit2" value="吉他">
            吉他
              <input name="travel" type="checkbox" id="habit3" value="旅行">
            旅行
              <input name="reading" type="checkbox" id="habit4" value="阅读">
            阅读
        <br>
        E-mail：<input name="E-mail" type="text" id="mail" size="20">
            <input name="Submit" type="submit" class="btn-grey" value="确认保存">
            <input name="Submit" type="submit" class="btn-grey" value="重新填写">
        <br>
            <input name="image" type="image" src="back.jpg">    
        </form>
    </body>
</html>

运行结果：