表单相关

在HTML5中，<form>元素用于创建一个表单，用于收集用户输入的数据，并将数据发送到服务器进行处理。

<form>元素有几个重要的属性：

action：指定表单提交时数据将被发送到的URL。
method：指定表单提交时使用的HTTP方法，可以设置为"get"或"post"。"get"方法将数据附加到URL上发送，"post"方法将数据作为HTTP请求体发送。
enctype：指定在表单提交时如何对数据进行编码，常用的值有"application/x-www-form-urlencoded"和"multipart/form-data"。
target：指定提交表单后的响应内容如何显示，可以设置为"_self"（在当前页面打开）、"_blank"（在新窗口中打开）等。

<form>元素可以包含多个表单元素，如文本框、下拉列表、单选框、复选框等。每个表单元素都有一个name属性和一个value属性，用于标识表单元素的名称和值。用户在提交表单时，表单元素的名称和值将被一起发送到服务器进行处理。

需要注意的是，由于表单中可能包含敏感信息，如用户的用户名、密码等，因此在处理表单数据时需要注意安全性问题，如避免跨站点脚本攻击（XSS）和SQL注入等攻击。此外，表单数据的处理也需要考虑数据验证、数据清洗等问题，以确保数据的正确性和完整性。

form 表单标签

表单标签示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<form>
    <input type="text" value="这是一个单行文本框"/><br/>
    <textarea>这是一个多行文本框</textarea><br/>
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>
</form>
</body>
</html>

input 表单输入标签

表单输入标签示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        姓名：<input type="text" /><br/>
        账号：<input type="text" size="15" maxlength="10" /><br />
        密码：<input type="password" size="15" maxlength="10" /><br/>
        性别:<br/>
        <input type="radio" name="gender" value="男" checked />男
        <input type="radio" name="gender" value="女" />女
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果"/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜"/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
        <br/>
        <input type="button" value="普通按钮"/>
        <br/>
        <input type="submit" value="提交按钮"/>
    </form>
</body>
</html>

textarea 多行输入标签

多行输入标签示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        个人简介：<br/>
        <textarea rows="5" cols="20">请介绍一下你自己</textarea>
    </form>
</body>
</html>

select 下拉列表标签

下拉列表标签示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>jQuery</option>
            <option>JavaScript</option>
            <option>Vue.js</option>
        </select>
        <select size="5">
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
            <option value="jQuery">jQuery</option>
            <option value="JavaScript">JavaScript</option>
            <option value="vue.js">Vue.js</option>
            <option value="HTML5">HTML5</option>
            <option value="CSS3">CSS3</option>
        </select>
    </form>
</body>
</html>

表单相关

# 表单相关

# form 表单标签

# input 表单输入标签

# textarea 多行输入标签

# select 下拉列表标签

表单相关

form 表单标签

input 表单输入标签

textarea 多行输入标签

select 下拉列表标签