HTML 多行输入

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML <textarea> 标签允许用户在表单中输入并提交自由文本。在这个实验中,我们将创建一个带有 <textarea> 输入的简单 HTML 表单,并应用一些常用的属性。

注意:你可以在 index.html 中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") html/FormsandInputGroup -.-> html/form_group("`Grouping Form Elements`") html/FormsandInputGroup -.-> html/form_access("`Accessibility in Forms`") subgraph Lab Skills html/basic_elems -.-> lab-70860{{"`HTML 多行输入`"}} html/head_elems -.-> lab-70860{{"`HTML 多行输入`"}} html/layout -.-> lab-70860{{"`HTML 多行输入`"}} html/doc_flow -.-> lab-70860{{"`HTML 多行输入`"}} html/forms -.-> lab-70860{{"`HTML 多行输入`"}} html/form_valid -.-> lab-70860{{"`HTML 多行输入`"}} html/form_group -.-> lab-70860{{"`HTML 多行输入`"}} html/form_access -.-> lab-70860{{"`HTML 多行输入`"}} end

创建 HTML 骨架

创建一个名为 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>

添加 Textarea 输入

<form> 元素内添加一个 <textarea> 元素。你可以通过设置 rowscols 属性来自定义文本区域的大小。

<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>

在这里,我们添加了一个 typesubmitinput 元素,以允许用户提交他们的反馈。由于 textarea 中添加了 required 属性,用户现在无法提交空表单。

使用 CSS 进一步自定义

最后,你可以为表单和输入元素应用一些 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 样式自定义了表单元素的外观。你可以根据需求进一步自定义表单和输入元素。

您可能感兴趣的其他 HTML 教程