跳到主要内容

WTF HTML极简教程: 5. 表单

WTF HTML教程,帮助新人快速入门HTML。

推特@WTFAcademy_@0xAA_Science

WTF Academy社群: 官网 wtf.academy | WTF Solidity教程 | discord | 微信群申请

所有代码和教程开源在github: github.com/WTFAcademy/WTF-HTML


表单是 HTML 中非常重要的一部分,它能让用户在网页上输入信息,并将信息提交到服务器。在这一章节中,我们将详细介绍如何使用<form><input><textarea>等标签来创建表单。

表单的创建

在 HTML 中,表单的创建主要由<form>元素完成。<form>元素定义了用户输入数据的区域,并且可以包含不同类型的输入元素,如文本字段、选择框、复选框、单选框和按钮等。

一个基本的表单结构如下:

<form>
<!-- 表单元素放在这里 -->
</form>

<form>元素中,你可以添加属性actionmethodaction属性定义表单数据提交到服务器后的处理文件的 URL。method属性定义数据如何发送到服务器,常用的值有 "get" 和 "post"。

文本输入

在表单中,我们经常需要用户输入文本。这可以通过<input>元素完成,其type属性设置为 "text"。

例如:

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

浏览器效果:

First name:
Last name:

密码

如果你需要用户输入密码,可以将<input>元素的type属性设置为 "password",输入的内容会被隐藏起来。

例如:

<form>
Password: <input type="password" name="pwd"/>
</form>

浏览器效果:

Password:

单选按钮(Radio Buttons)

单选按钮和复选框可以让用户在多个选项中选择一个或多个。单选按钮的type属性值为 "radio"。

<form action="">
ACCOUNT:
<input type="radio" name="address" value="addr1"/>0x5B38Da6a701c568545dCfcB03FcB875f56beddC4<br/>
<input type="radio" name="address" value="addr2"/>0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2
</form>

浏览器效果:

ACCOUNT:0x5B38Da6a701c568545dCfcB03FcB875f56beddC4
0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2

复选框(Checkboxes)

复选框可以选取一个或多个选项,使用 <input type="checkbox"> 定义

示例如下:

<form>
Token value <br/>
<input type="checkbox" name="token_value" value="Wei"/>Wei<br/>
<input type="checkbox" name="token_value" value="GWei"/>GWei<br/>
<input type="checkbox" name="token_value" value="Ether"/>Ether<br/>
</form>

浏览器效果:

Token value
Wei
GWei
Ether

下拉列表(select)

下拉列表可以让用户从多个选项中选择一个。它由<select>元素创建,并使用<option>元素来定义选项。

示例如下:

<form action="">
Contract
<select>
<option>Facucet.sol</option>
<option>ERC20.sol</option>
<option>ERC721.sol</option>
</select>
</form>

浏览器效果:

Contract

提交按钮(Submit)

表单通常需要一个提交按钮来提交用户的输入。这可以通过设置<input>元素的type属性为 "submit" 来完成。

示例如下:

<form name="input" action="action.php" method="get">
<input type="submit" value="Deploy"/>
<input type="text" name="user" placeholder='address'/>
</form>

浏览器效果:

表单其他元素

还有一些表表单常见的元素属性:

  • name:表单的名称。该值不能是空字符串,并且在它所在的表单集合中需要是唯一的

  • action :指定表单内容的送达地址,实现对输入数据的处理

  • method:定义表单数据的提交方式,可以是以下值:

    • post:HTTP POST 方法,表单数据会包含在表单体内发送给服务器,可以用于提交敏感数据,如用户名与密码等
    • get:默认值, HTTP GET 方法,表单数据会附加在 action 属性的 URL 中,并以 ? 作为分隔符,一般用于不敏感信息,如分页等。例如:https://www.wtfacademy.com/?currentPage=1,这里的 currentPage=1 就是 get 方法提交的数据

总结

以上就是 HTML 表单的基本用法。通过学习这些标签和属性,你应该已经能够创建基本的 HTML 表单了。