介绍
HTML <textarea>
标签允许用户在表单中输入并提交自由文本。在这个实验中,我们将创建一个带有 <textarea>
输入的简单 HTML 表单,并应用一些常用的属性。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
HTML <textarea>
标签允许用户在表单中输入并提交自由文本。在这个实验中,我们将创建一个带有 <textarea>
输入的简单 HTML 表单,并应用一些常用的属性。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
创建一个名为 index.html
的空 HTML 文件,并输入基本的 HTML5 样板代码。
<!doctype html>
<html>
<head>
<title>HTML Textarea 标签教程</title>
</head>
<body>
<!-- Your HTML code here -->
</body>
</html>
在 HTML 的 <body>
中添加一个 <form>
元素。我们将使用这个表单来收集用户的信息。
<form>
<!-- Form elements go here -->
</form>
在 <form>
元素内添加一个 <textarea>
元素。你可以通过设置 rows
和 cols
属性来自定义文本区域的大小。
<form>
<label for="feedback">输入你的反馈:</label>
<textarea id="feedback" name="feedback" rows="10" cols="50"></textarea>
</form>
在这里,我们添加了一个标签来描述输入字段(feedback),以及一个 id
属性为 "feedback" 的 textarea
输入。name
属性用于在服务器端识别输入字段。
我们可以为表单和输入元素添加其他 HTML 属性。例如,我们可以添加一个 required
属性,以确保用户输入一些文本。
<form>
<label for="feedback">输入你的反馈:</label>
<textarea
id="feedback"
name="feedback"
rows="10"
cols="50"
required
></textarea>
<input type="submit" value="Submit Feedback" />
</form>
在这里,我们添加了一个 type
为 submit
的 input
元素,以允许用户提交他们的反馈。由于 textarea
中添加了 required
属性,用户现在无法提交空表单。
最后,你可以为表单和输入元素应用一些 CSS 样式,使表单在视觉上更具吸引力。
<style>
form {
border: 1px solid #ccc;
padding: 10px;
margin: 20px auto;
max-width: 500px;
}
label,
textarea,
input[type="submit"] {
display: block;
margin-bottom: 10px;
width: 100%;
}
</style>
在这里,我们为表单设置了边框、添加了内边距和外边距,并限制了表单的最大宽度。我们还调整了标签、文本区域和提交输入元素的显示方式和宽度。
在本实验中,我们学习了如何创建一个包含 <textarea>
输入的基本 HTML 表单,并应用了一些常用属性。我们还通过 CSS 样式自定义了表单元素的外观。你可以根据需求进一步自定义表单和输入元素。