2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
id: bad87fee1348bd9aede08830
|
2020-12-16 07:37:30 +00:00
|
|
|
title: 创建一个表单
|
2018-10-10 22:03:03 +00:00
|
|
|
challengeType: 0
|
2019-12-26 12:05:59 +00:00
|
|
|
forumTopicId: 16817
|
2021-01-13 02:31:00 +00:00
|
|
|
dashedName: create-a-form-element
|
2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --description--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
我们可以只通过 HTML 来实现发送数据给服务器的表单, 只需要给 `form` 元素添加 `action` 属性即可。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
例如:
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-02-06 04:42:36 +00:00
|
|
|
```html
|
|
|
|
<form action="/url-where-you-want-to-submit-form-data">
|
|
|
|
<input>
|
|
|
|
</form>
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --instructions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-05-09 19:42:02 +00:00
|
|
|
把现有的 `input` 元素嵌套到一个表单 `form` 元素里,然后设置 `form` 元素的 `action` 属性值为 `"https://www.freecatphotoapp.com/submit-cat-photo"`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --hints--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
现有的 `input` 输入框应位于新创建的 `form` 表单里面。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
2021-01-08 19:20:48 +00:00
|
|
|
const inputElem = document.querySelector('form input');
|
2020-12-16 07:37:30 +00:00
|
|
|
assert(
|
2021-01-08 19:20:48 +00:00
|
|
|
inputElem.getAttribute('type') === 'text' &&
|
|
|
|
inputElem.getAttribute('placeholder') === 'cat photo URL'
|
2020-12-16 07:37:30 +00:00
|
|
|
);
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
|
|
|
|
2021-05-09 19:42:02 +00:00
|
|
|
`form` 的 `action` 属性值应为 `https://www.freecatphotoapp.com/submit-cat-photo`。
|
2020-12-16 07:37:30 +00:00
|
|
|
|
|
|
|
```js
|
2021-05-09 19:42:02 +00:00
|
|
|
const action = $('form').attr('action');
|
|
|
|
assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
|
2020-12-16 07:37:30 +00:00
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-08 19:20:48 +00:00
|
|
|
`form` 元素应有开始标签和结束标签。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
```js
|
|
|
|
assert(
|
|
|
|
code.match(/<\/form>/g) &&
|
|
|
|
code.match(/<form [^<]*>/g) &&
|
|
|
|
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
|
|
|
|
);
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
# --seed--
|
|
|
|
|
|
|
|
## --seed-contents--
|
|
|
|
|
|
|
|
```html
|
|
|
|
<h2>CatPhotoApp</h2>
|
|
|
|
<main>
|
|
|
|
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
|
|
|
|
2021-05-09 19:42:02 +00:00
|
|
|
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
2021-01-13 02:31:00 +00:00
|
|
|
|
|
|
|
<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>
|
|
|
|
<input type="text" placeholder="cat photo URL">
|
|
|
|
</main>
|
|
|
|
```
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --solutions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2021-01-13 02:31:00 +00:00
|
|
|
```html
|
|
|
|
<h2>CatPhotoApp</h2>
|
|
|
|
<main>
|
|
|
|
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
|
|
|
|
2021-05-09 19:42:02 +00:00
|
|
|
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
2021-01-13 02:31:00 +00:00
|
|
|
|
|
|
|
<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>
|
2021-05-09 19:42:02 +00:00
|
|
|
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
2021-01-13 02:31:00 +00:00
|
|
|
<input type="text" placeholder="cat photo URL">
|
|
|
|
</form>
|
|
|
|
</main>
|
|
|
|
```
|