小白前端入门笔记（19），form表单里的加入提交按钮
小白前端入门笔记（19），form表单里的加入提交按钮
TechFlow-承志
发布于 2021-03-11 10:31:38
发布于 2021-03-11 10:31:38
代码可运行
运行总次数：0
代码可运行
大家好，欢迎来到freecodecamp HTML专题的第19篇。
今天的挑战关于form表单添加提交按钮。
背景知识
在上一次挑战当中我们尝试了给一个input元素添加form表单，但是我们只是添加了表单是不够的，用户填好了信息但是少了一个触发上传的按钮。所以今天我们就来说说怎么给form表单添加一个提交按钮。
添加的方法非常简单，在HTML当中专门有一个标签就叫做button，它可以在页面上创建一个按钮。但是并不是随便一个按钮就可以提交信息的，我们必须要保证它的类型是"submit"，这样将它放在表单当中，就可以提交信息了。
下面是一个例子：
<button type="submit">this button submits the form</button>
题意
在现在已有的form表单当中添加一个submit按钮，并且将"Submit"作为它的文本。
要求
- 你的form必须要有
button按钮 - 你的提交按钮必须要有
type="submit" - 你的提交按钮必须要有文本"Submit"
- 你的按钮元素需要有closing tag
编辑器
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>
</main>
解法
我们了解了form表单当中button的用法，按照题目的意思加上即可：
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">
Submit
</button>
</form>
</main>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-03-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
