2018-10-10 18:03:03 -04:00
|
|
|
---
|
|
|
|
id: bad87fee1348bd9aede08830
|
2020-12-16 00:37:30 -07:00
|
|
|
title: 创建一个表单
|
2018-10-10 18:03:03 -04:00
|
|
|
challengeType: 0
|
2019-12-26 20:05:59 +08:00
|
|
|
videoUrl: 'https://scrimba.com/p/pVMPUv/cmQ3Kfa'
|
|
|
|
forumTopicId: 16817
|
2018-10-10 18:03:03 -04:00
|
|
|
---
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --description--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
如果想使用 HTML 向服务器提交数据,可以给`form`添加`action`属性。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
例如:
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
`<form action="/url-where-you-want-to-submit-form-data"></form>`
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --instructions--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
在`input`输入框外层创建一个`form`表单,然后设置表单的`action`属性为`"https://freecatphotoapp.com/submit-cat-photo"`。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --hints--
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
在`input`输入框外层创建一个`form`表单。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
```js
|
|
|
|
assert(
|
|
|
|
$('form') &&
|
|
|
|
$('form').children('input') &&
|
|
|
|
$('form').children('input').length > 0
|
|
|
|
);
|
2018-10-10 18:03:03 -04:00
|
|
|
```
|
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
确保表单的`action`属性为`"https://freecatphotoapp.com/submit-cat-photo"`。
|
|
|
|
|
|
|
|
```js
|
|
|
|
assert(
|
|
|
|
$('form').attr('action') === 'https://freecatphotoapp.com/submit-cat-photo'
|
|
|
|
);
|
|
|
|
```
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
确保表单有开始标记和结束标记。
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
```js
|
|
|
|
assert(
|
|
|
|
code.match(/<\/form>/g) &&
|
|
|
|
code.match(/<form [^<]*>/g) &&
|
|
|
|
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
|
|
|
|
);
|
|
|
|
```
|
2018-10-10 18:03:03 -04:00
|
|
|
|
2020-12-16 00:37:30 -07:00
|
|
|
# --solutions--
|
2018-10-10 18:03:03 -04:00
|
|
|
|