{"id":651,"date":"2021-09-15T17:09:31","date_gmt":"2021-09-15T09:09:31","guid":{"rendered":"https:\/\/yukihiew.com\/?p=651"},"modified":"2022-08-10T23:37:41","modified_gmt":"2022-08-10T15:37:41","slug":"html-form","status":"publish","type":"post","link":"https:\/\/yukihiew.com\/html-form\/","title":{"rendered":"\u7b46\u8a18 | \u5e38\u7528 HTML form \u8868\u55ae\u6a19\u7c64"},"content":{"rendered":"\n
\u4e0d\u77e5\u9053\u70ba\u4f55\u6211\u5f88\u5e38\u5fd8\u8a18 HTML form \u9019\u500b\u6a19\u7c64\u76f8\u95dc\u7684\u7a0b\u5f0f\u78bc\u2026.
\u53ef\u80fd\u56e0\u70ba\u76ee\u524d\u5de5\u4f5c\u4e0a\u9047\u5230\u7684\u7db2\u9801\u90fd\u6c92\u6709\u8868\u55ae\u7684\u9700\u6c42\uff0c\u7562\u7adf\u505a\u7684\u90fd\u662f\u884c\u92b7\u6d3b\u52d5\u7684\u7db2\u9801\uff0c\u53ea\u662f\u4e0a\u516d\u89d2\u7684\u8ab2\u4e0a\u5230AJAX\u7684\u90e8\u5206\u6642\uff0c\u770b\u8d77\u4f86\u4ee5\u5f8c\u8f49\u8077\u7684\u8a71\uff0c\u4e0d\u7ba1\u662f\u8ddf\u4f3a\u670d\u5668\u62ff\u53d6\u8cc7\u6599\u6216\u662f\u767b\u5165\u8207\u8a3b\u518a\u9019\u7a2e\u5e38\u898b\u7684\u529f\u80fd\u90fd\u9700\u8981\u7528\u5230\uff0c\u6240\u4ee5\u9084\u662f\u5b78\u6e05\u695a\u4e00\u9ede\u5440~
\u5beb\u500b\u7b46\u8a18\u5c07\u5927\u90e8\u5206\u8f03\u5e38\u7528\u7684 HTML form \u8868\u55ae\u6a19\u7c64\u8207\u5c6c\u6027\u8a18\u9304\u4e0b\u4f86\uff0c\u4ee5\u65b9\u4fbf\u67e5\u8a62\u3002<\/p>\n\n\n\n
action = url<\/mark><\/p>\n\n\n\n \u7528\u4f86\u6307\u5b9a\u8868\u55ae\u9001\u51fa\u5f8c\u7684\u76ee\u7684\u7db2\u5740\u3002<\/p>\n<\/div><\/div>\n\n\n\n method = POST \/ GET<\/mark><\/p>\n\n\n\n \u7528\u4f86\u6307\u5b9a\u8cc7\u6599\u50b3\u8f38\u6642\u7528\u7684 HTTP \u5354\u8b70\uff0c target \u7528\u4f86\u6307\u5b9a\u700f\u89bd\u5668\u8981\u5982\u4f55\u986f\u793a\u8868\u55ae\u9001\u51fa\u5f8c\u4f3a\u670d\u5668\u56de\u61c9\u7684\u7d50\u679c\u3002<\/mark><\/p>\n\n\n\n _self: \u986f\u793a\u5728\u8868\u55ae\u6240\u5728\u7684\u7576\u524d\u8996\u7a97 autocomplete \u9019\u500b\u8868\u55ae\u4e2d\u7684\u6b04\u4f4d\u662f\u5426\u555f\u7528\u700f\u89bd\u5668\u81ea\u52d5\u5b8c\u6210\u6a5f\u5236<\/mark><\/p>\n\n\n\n off: \u5426 <input> \u8f38\u5165\u6b04\u4f4d <textarea>\u591a\u884c\u6587\u5b57\u8f38\u5165\u6b04\u4f4d<\/p>\n\n\n\n <select>+<option> \u4e0b\u62c9\u5f0f\u9078\u55ae \uff0ename: \u4ee3\u8868\u8868\u55ae\u9001\u51fa\u6642\uff0c\u8a72\u6b04\u4f4d\u7684\u540d\u7a31\u3002 <fieldset> \u662f\u5340\u584a\u5f62\u5f0f\u7684\u8868\u55ae\u6a19\u7c64\uff0c\u53ef\u5c07\u63a7\u5236\u5143\u4ef6\u505a\u5206\u7d44\uff0c\u642d\u914d<legend>\u6a19\u7c64\uff0c\u8868\u793a\u5206\u7d44\u6a19\u984c\u3002 <label>\u53ef\u70ba\u6b04\u4f4d\u5448\u73fe\u6a19\u984c\uff0c\u4e26\u53ef\u4f7f\u7528for\u5c6c\u6027\u589e\u52a0\u6b04\u4f4d\u7684\u9ede\u64ca\u7bc4\u570d\uff0c\u6216\u5c07\u6b04\u4f4d\u5305\u5728\u6a19\u7c64\u88e1\u4ea6\u53ef\u3002<\/p>\n\n\n\n <optgroup>\u7528\u4f86\u5c07<select>\u88e1\u7684\u9078\u9805\u505a\u5206\u7d44\uff0c\u4f7f\u7528label\u5c6c\u6027\u547d\u540d\u5206\u7d44\u6a19\u984c\u3002<\/p>\n\n\n\n \u4e0d\u7ba1\u662f\u8ddf\u4f3a\u670d\u5668\u62ff\u53d6\u8cc7\u6599\u6216\u662f\u767b\u5165\u8207\u8a3b\u518a\u9019\u7a2e\u5e38\u898b\u7684\u529f\u80fd\u90fd\u9700\u8981\u7528\u5230\uff0c
POST\u7528\u5728\u8868\u55ae\u8cc7\u6599\u91cf\u6bd4\u8f03\u5927\u3001\u6709\u593e\u5e36\u6a94\u6848\u4e0a\u50b3 (file upload) \u6216\u96b1\u79c1\u6027\u8003\u91cf\u7684\u8cc7\u6599\u3002
GET\u7528\u5728\u8cc7\u6599\u91cf\u8f03\u5c0f\u6216\u975e\u654f\u611f\u7684\u8cc7\u6599\uff0c\u56e0\u70ba\u8cc7\u6599\u6703\u88ab\u653e\u5728\u7db2\u5740\u4e2d\u76f4\u63a5\u50b3\u51fa\u3002
target \u7528\u4f86\u6307\u5b9a\u700f\u89bd\u5668\u8981\u5982\u4f55\u986f\u793a\u8868\u55ae\u9001\u51fa\u5f8c\u4f3a\u670d\u5668\u56de\u61c9\u7684\u7d50\u679c\u3002<\/p>\n<\/div><\/div>\n\n\n\n
_blank: \u986f\u793a\u5728\u65b0\u9801\u7c64\/\u8996\u7a97
_parent: \u986f\u793a\u5728\u4e0a\u4e00\u5c64\u7684\u8996\u7a97 (\u5982\u679c\u8868\u55ae\u662f\u653e\u5728<frame>\u88e1)
_top: \u986f\u793a\u5728\u6700\u9802\u5c64\u7684\u8996\u7a97<\/p>\n<\/div><\/div>\n\n\n\n
on: \u662f\uff0c\u9810\u8a2d\u503c<\/p>\n<\/div><\/div>\n\n\n\u653e\u5728<form>\u88e1\u7684\u6a19\u7c64\u5143\u7d20(\u4e5f\u7a31\u63a7\u5236\u5143\u4ef6)<\/h2>\n\n\n
<input>\u7684type\u5c6c\u6027\u7528\u4f86\u6307\u5b9ainput\u7684\u5448\u73fe\u65b9\u5f0f
<input type=”text”> \u6587\u5b57\u8f38\u5165\u6b04\u4f4d
<input type=”password”> \u96b1\u85cf\u6587\u5b57\u7684\u8f38\u5165\u6b04\u4f4d
<input type=”checkbox”> \u6838\u53d6\u65b9\u6846
<input type=”radio”> \u9078\u9805\u6309\u9215
<input type=”submit”> \u905e\u4ea4\u8868\u55ae\u6309\u9215<\/p>\n\n\n\n
<select>\u7528\u4f86\u5efa\u7acb\u4e0b\u62c9\u5f0f\u9078\u55ae\uff0c<option>\u5247\u4ee3\u8868\u9078\u55ae\u4e2d\u7684\u9078\u9805\u3002<\/p>\n\n\n\u53ef\u6dfb\u52a0\u7684\u8868\u55ae\u6a19\u7c64\u7684\u5c6c\u6027<\/h2>\n\n\n
\u3000<input type=”text” name=”name” value=”yuki”>
\u3000\u9001\u51fa\u8868\u55ae\u5f8c\uff0c\u6703\u4ee5name=yuki\u50b3\u7d66\u4f3a\u670d\u5668\u3002
\uff0e value: \u7576\u4f5c\u9810\u8a2d\u503c\u6216\u4ee3\u8868\u50b3\u905e\u8cc7\u6599\u7684\u503c\u3002
\u3000<input type=”submit”>\u7684value\u5247\u4ee3\u8868\u6309\u9215\u88e1\u7684\u6587\u5b57\u3002
\uff0e autofocus: \u8f09\u5165\u8868\u55ae\u5f8c\uff0c\u5c07\u6e38\u6a19\u4e3b\u52d5\u805a\u7126\u7684\u6b04\u4f4d\u3002
\uff0e disabled: \u7981\u6b62\u4f7f\u7528\u7684\u6b04\u4f4d\u3002
\uff0e placeholder: \u53ef\u5448\u73fe\u5728\u6b04\u4f4d\u88e1\u7684\u63d0\u793a\u6587\u5b57\u3002
\uff0e required: \u5c07\u6b04\u4f4d\u8a2d\u5b9a\u70ba\u5fc5\u586b\u3002
\uff0e maxlength: \u8f38\u5165\u7684\u6587\u5b57\u4e0a\u9650\u3002
\uff0e minlength: \u6700\u5c11\u9808\u8f38\u5165\u7684\u6587\u5b57\u6578\u91cf\u3002<\/p>\n\n\n\u5176\u4ed6\u8868\u55ae\u6a19\u7c64<\/h2>\n\n\n
<legend> \u70ba<fieldset>\u505a\u547d\u540d\u3002<\/p>\n\n\n\n<fieldset>\n <legend>My pet<\/legend>\n <label>Dog name:<\/label> <input name=\"name\">\n <label>age:<\/label> <input type=\"number\" name=\"age\">\n <\/fieldset><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
<select name=\"partyFood\">\n <optgroup label=\"Eat\">\n <option>Burger<\/option>\n <option>Sausage<\/option>\n <option>Taco<\/option>\n <\/optgroup>\n <optgroup label=\"Drink\">\n <option>Grey Tea<\/option>\n <option>Cola<\/option>\n <option>Lemonade<\/option>\n <\/optgroup>\n<\/select><\/code><\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\n\u5beb\u500b\u7b46\u8a18\u5c07\u5927\u90e8\u5206\u8f03\u5e38\u7528\u7684 HTML form \u8868\u55ae\u6a19\u7c64\u8207\u5c6c\u6027\u8a18\u9304\u4e0b\u4f86\uff0c\u4ee5\u65b9\u4fbf\u67e5\u8a62\u3002<\/p>\n","protected":false},"author":1,"featured_media":658,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[124],"tags":[45],"class_list":["post-651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-124","tag-html","entry","has-media"],"yoast_head":"\n