Menu
CoddyTech
开始学习

表单中的按钮

本课属于 Coddy HTML 学习旅程的“基础知识”单元。第 45 课，共 60 课。

按钮在表单中起着关键作用，可以帮助提交数据或重置字段。来看看它们是如何工作的：

提交按钮：

<form>
	<input type="text" name="username" placeholder="Enter username">
	<button type="submit">Submit</button>
</form>
  • type="submit"：将表单数据发送到服务器。

重置按钮：

<form>
	<input type="text" name="name" value="John Doe">
	<button type="reset">Reset</button>
</form>
  • type="reset"：清除所有字段，并将它们重置为默认值。
challenge icon

挑战

简单

创建一个包含不同类型按钮的 HTML 文档。表单应包含以下元素：

  1. 一个文本输入框，名称为 "message"，占位文本为 "Enter your message"。
  2. 添加一个提交按钮（<button type="submit">），按钮文字为 "Send"。
  3. 添加一个重置按钮（<button type="reset">），按钮文字为 "Clear"。
  4. 添加一个按钮（<button>），按钮文字为 "Click Me"，且不带 type 属性。在表单中，不带 type 的按钮也会提交表单。

亲手试试

<!DOCTYPE html>
<html>
    <body>
        <!-- 在这里编写代码 -->
    </body>
</html>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

基础知识中的所有课

1HTML 基础

什么是 HTML？HTML 的基本结构标签和元素嵌套标签和闭合标签HTML 中的注释

4食谱卡片

项目概览食谱标题和描述项目课食材项目课步骤项目课

7个人资料页

项目概览页眉部分项目课个人头像项目课关于我部分项目课社交链接项目课

10表格

表格基础添加标题跨行与跨列表格回顾

2文本与格式设置

标题段落换行粗体和斜体再次练习粗体和斜体回顾：格式设置

5添加内容

HTML 属性链接新页面链接图片图片属性

8表单和输入，第 1 部分

表单基础文本输入框输入属性密码输入框输入框的标签回顾：基础表单

11活动报名页面

项目概览页眉部分项目课活动详情部分项目课报名表单项目课页脚部分项目课

3使用列表

无序列表有序列表嵌套列表列表回顾

6页面布局

div 元素行内 span语义化标签section 和 article 元素布局回顾

9表单和输入，第 2 部分

单选按钮复选框下拉菜单按钮表单中的按钮回顾：表单 #1回顾：表单 #2

12最终挑战

简单个人资料卡活动邀请卡简单文章页面最喜欢的书籍列表

自己练习： Web 在线编辑器