HugeYLH
HugeYLH

HTML学习（4）-HTML表单

文章目录

    • HTML表单
    • HTML表单属性
    • HTML表单元素
    • HTML输入类型
    • HTML输入属性
    • HTML input form*属性

我的个人博客：欢迎来逛逛

HTML表单

标签用于收集用户的输入，用它来定义HTML表单

是最基本和重要的表单元素，它具有不同的属性：

类型 描述
text 定义常规文本输入
radio 定义单选按钮输入
submit 定义提交按钮

文本输入：text

 <form>
     First name: <br/>
     <input type="text" name="First name">
     <br/>
     Last name: <br/>
     <input type="text" name="Last name">
     <br/>
form>

示例如下：

First name:

Last name:

单选输入：radio

<h2>单选输入h2>
<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br/>
    <input type="radio" name="sex" value="female">Female
form>

示例如下：

单选输入

Male
Female

提交输入：submit

在的时候规定其 action属性为 提交的处理程序，例如我这里设置了一个网址，则点击submit后将会跳转到这个 action的网址。

如果省略 action 属性，则 action 会被设置为当前页面。

<h2>表单提交h2>
<form action="https://helloylh.com">
    <input type="text" name="account" value="账号">
    <br/>
    <input type="text" name="password" value="密码">
    <br/>
    <input type="submit" value="Submit">
form>

示例如下：

表单提交



method属性为提交表单的时候使用的HTTP方法，可以为GET或者POST

使用GET的时候，表单数据在地址栏是可见的（GET 最适合少量数据的提交）。

使用POST的时候，页面地址栏中被提交的数据是不可见的（适合密码的输入等隐私信息）。

name属性：如果想要输入被正确提交，则必须指定name属性，submit只会提交具有name属性的input

组合表单数据

组合表单的数据：使用

。

为这个表单命名：使用。


    

        请输入信息
        Account: 

        
        

        Password:

示例如下：

请输入信息 Account:

Password:

的其他属性：

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

HTML表单属性

action属性定义提交表单执行的行为

当用户提交的时候，表单数据会发送到其指向的文件上，该文件包含处理表单数据的服务器端脚本。

**提示：**如果省略 action 属性，则将 action 设置为当前页面。

target属性规定提交表单后在何处相应

method 属性规定提交表单会使用的HTTP方法：表单数据作为URL：get；作为HTTP post事务：post

Autocomplete 属性规定表单是否打开自动完成功能（会根据用户之前的输入自动填写值）。

novalidate属性规定不对表单输入的数据进行验证。

–

HTML表单元素