2.1 元素 <input>
表单是网页中的重要组成部分，给用户提供输入和发送数据的功能。表单的基本元素有 <input>、<textarea> 和 <button>。这些元素允许用户输入文本、选择选项、上传文件以及执行其他操作。
元素 <input> 是最常用的表单元素之一。它支持多种输入数据类型，可以用于各种目的，例如输入文本、选择文件、指定日期等。
通用语法：
HTML
<input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
<input> 的属性
type: 定义输入类型name: 表单元素的名称，用于在服务器端识别数据id: 元素的唯一标识符value: 元素的初始值placeholder: 在输入数据之前显示在元素内的占位符文本required: 指定该元素为必填项
<input> 的例子
input-text 允许输入单行文本。
HTML
<input type="text" name="username" id="username" placeholder="输入用户名" required>
2.2 元素 <textarea>
元素 <textarea> 用于输入多行文本。它与 <input type="text"> 的不同之处在于，<textarea> 允许输入包含多行的文本，并可调整大小。
通用语法：
HTML
<textarea name="name"
id="id"
rows="rows" cols="cols"
placeholder="placeholder" required>
</textarea>
<textarea> 的属性
name: 表单元素的名称，用于在服务器端识别数据id: 元素的唯一标识符rows: 文本的行数cols: 一行中的字符数placeholder: 在输入数据之前显示在元素内的占位符文本required: 指定该元素为必填项
使用示例：
HTML
<label for="comments">评论:</label>
<textarea name="comments"
id="comments"
rows="5"
cols="40"
placeholder="在此输入你的评论..."
required>
</textarea>
<textarea> 的样式
可以使用 CSS 来美化 <textarea>，提升外观和用户体验。
样式示例：
CSS
textarea {
width: 75%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical; /* 只可垂直调整大小 */
}
HTML
<label for="comments">评论:</label>
<textarea name="comments"
id="comments"
rows="5" placeholder="在此输入你的评论..." required>
</textarea>
2.3 元素 <button>
元素 <button> 用于在表单中创建按钮。与 <input type="button"> 不同，<button> 更加灵活，它可以包含多种 HTML 元素，如文本、图片等。
通用语法：
HTML
<button type="type" name="name" id="id" value="value">按钮文本</button>
使用示例：
HTML
<button type="submit">发送</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('按钮被点击了!')">点我</button>
<button> 的属性
-
type:定义按钮的行为。可能的值：submit: 提交表单（默认值）reset: 重置表单button: 普通按钮，无默认行为
name: 表单元素的名称，用于在服务器端识别数据。id: 元素的唯一标识符。value: 在提交表单时发送到服务器的值。
<button> 中的嵌套 HTML
元素 <button> 允许在其内部插入各种 HTML 元素，以创建更复杂的按钮。
嵌套 HTML 示例：
HTML
<button type="type" name="name" id="id" value="value">
📨发送
</button>
HTML
<button type="type" name="name" id="id" value="value">
<img src="submit_icon.png" alt="发送">
发送
</button>
<button> 的样式
可以使用 CSS 来美化 <button>，提升外观和用户体验。
样式示例：
CSS
button {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文本 */
padding: 15px 20px; /* 内边距 */
border: none; /* 无边框 */
border-radius: 4px; /* 圆角边框 */
cursor: pointer; /* 光标指针 */
}
button:hover {
background-color: #45a049; /* 悬停时的深绿色背景 */
}
HTML
<button type="submit">发送</button>
GO TO FULL VERSION