{"id":1715,"date":"2011-06-22T15:45:05","date_gmt":"2011-06-22T07:45:05","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=1715"},"modified":"2017-08-05T23:24:18","modified_gmt":"2017-08-05T15:24:18","slug":"html5%e6%96%b0%e5%a2%9e%e7%9a%84form%e5%b1%9e%e6%80%a7%e7%ae%80%e4%bb%8b","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2011\/06\/html5%e6%96%b0%e5%a2%9e%e7%9a%84form%e5%b1%9e%e6%80%a7%e7%ae%80%e4%bb%8b\/","title":{"rendered":"HTML5\u65b0\u589e\u7684form\u5c5e\u6027\u7b80\u4ecb"},"content":{"rendered":"

by zhangxinxu<\/a> from http:\/\/www.zhangxinxu.com<\/a>
\n\u672c\u6587\u5730\u5740\uff1ahttp:\/\/www.zhangxinxu.com\/wordpress\/?p=1715<\/a><\/p>\n

\u4e00\u3001\u5f15\u8a00<\/h3>\n

HTML5\u4e2d\u65b0\u589e\u4e86\u4e00\u4e2a\u540d\u4e3aform<\/code>\u7684\u5c5e\u6027\uff0c\u662f\u4e00\u4e2a\u4e0e\u5904\u7406\u8868\u5355\u76f8\u5173\u7684\u5143\u7d20\u3002<\/p>\n

\u5728HTML4\u6216XHTML\u4e2d\uff0c\u6211\u4eec\u8981\u63d0\u4ea4\u4e00\u4e2a\u8868\u5355\uff0c\u5fc5\u987b\u628a\u76f8\u5173\u7684\u63a7\u4ef6\u5143\u7d20\u90fd\u653e\u5728<form><\/code>\u5143\u7d20\u4e0b\u3002\u56e0\u4e3a\u8868\u5355\u63d0\u4ea4\u7684\u65f6\u5019\uff0c\u4f1a\u76f4\u63a5\u5ffd\u7565\u4e0d\u662f\u5176\u5b50\u5143\u7d20\u7684\u63a7\u4ef6\u3002\u4f46\u662f\uff0c\u5b9e\u9645\u60c5\u51b5\u4e0b\uff0c\u7531\u4e8e\u9875\u9762\u8bbe\u8ba1\u4e0e\u5b9e\u73b0\u7684\u7279\u6b8a\u6027\uff0c\u4f1a\u5b58\u5728\u6709\u4e9b\u8868\u5355\u4e4b\u5916\u7684\u5143\u7d20\u4e5f\u9700\u8981\u4e00\u5e76\u63d0\u4ea4\u7684\u60c5\u51b5\uff0c\u8fd9\u65f6\u5019\uff0c\u4f20\u7edf\u7684\u8868\u5355\u529f\u80fd\u5c31\u663e\u5f97\u6709\u4e9b\u6349\u895f\u89c1\u8098\u4e86\u3002<\/p>\n

HTML5\u4e2d\u65b0\u589eform<\/code>\u5c5e\u6027\u5c31\u662f\u4e3a\u66f4\u597d\u5730\u5904\u7406\u8fd9\u4e2a\u95ee\u9898\u624d\u51fa\u73b0\u7684\u3002\u5176\u4f5c\u7528\uff0c\u4e2a\u4eba\u611f\u89c9\uff0c\u6709\u70b9\u7c7b\u4f3c\u4e8elabel<\/code>\u6807\u7b7e\u7684for<\/code>\u5c5e\u6027\u3002<\/p>\n

\u4e8c\u3001\u66f4\u597d\u7684\u5b9e\u73b0<\/h3>\n

HTML5\u4e2d\u7684form<\/code>\u5c5e\u6027\u53ef\u4ee5\u8ba9HTML\u63a7\u4ef6\u5143\u7d20\u5b64\u7acb\u5728\u8868\u5355\u4e4b\u5916\uff0c\u7136\u540e\u8868\u5355\u5728\u63d0\u4ea4\u7684\u65f6\u5019\u4e0d\u4ec5\u53ef\u4ee5\u63d0\u4ea4\u8868\u5355\u5185\u7684\u63a7\u4ef6\u5143\u7d20\uff0c\u8fd9\u4e2a\u5b64\u7acb\u5728\u5916\u7684\u63a7\u4ef6\u5143\u7d20\u503c\u4e5f\u53ef\u4ee5\u4e00\u5e76\u63d0\u4ea4\u51fa\u53bb\u3002\u770b\u4e00\u4e2a\u4f8b\u5b50\uff0cHTML\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n

\n
<form id=\"contact_form\" method=\"get\">\n    <p>\n        <label for=\"name\">\u59d3\u540d\uff1a<\/label><input type=\"text\" id=\"name\" name=\"name\">\n    <\/p>\n    <p>\n        <label for=\"email\">\u90ae\u7bb1\uff1a<\/label><input type=\"email\" id=\"email\" name=\"email\">\n    <\/p>\n    <input type=\"submit\" id=\"submit\" value=\"\u53d1\u9001\">\n<\/form>\n<p>\n    \u8bc4\u8bba\uff1a<textarea id=\"comments\" name=\"comment\" form=\"contact_form\"><\/textarea>\n<\/p><\/pre>\n<\/div>\n
\u4e0a\u9762\u7684HTML\u4ee3\u7801\u6211\u4eec\u9700\u8981\u6ce8\u610f\u8fd9\u4e48\u51e0\u70b9\uff1a<\/p>\n
    \n
  1. <textarea><\/code>\u5143\u7d20\u5728<form><\/code>\u5143\u7d20\u4e4b\u5916\uff08\u4e0d\u662f\u5b50\u5143\u7d20\uff0c\u662f\u5144\u5f1f\u5143\u7d20\uff09<\/li>\n
  2. <textarea><\/code>\u5143\u7d20\u6709\u4e00\u4e2aform<\/code>\u5c5e\u6027\uff0c\u4e14form<\/code>\u5c5e\u6027\u7684\u503c\u6b63\u597d\u5c31\u662f<form><\/code>\u5143\u7d20\u7684id<\/code>\u3002<\/li>\n<\/ol>\n
    \u806a\u660e\u7684\u4f60\u5e94\u8be5\u5927\u81f4\u77e5\u9053\u4e86\uff0cHTML5\u4e2d\u5916\u90e8\u63a7\u4ef6\u5143\u7d20\u4e0e\u8868\u5355\u76f8\u5173\u8054\u5c31\u662f\u8ba9\u5176form<\/code>\u5c5e\u6027\u503c\u7b49\u4e8e\u8868\u5355\u5143\u7d20\u7684id<\/code>\u503c\uff0c\u7c7b\u4f3c\u4e8e<label><\/code>\u5143\u7d20\u7684for<\/code>\u5c5e\u6027\u503c\u7b49\u4e8e\u76f8\u5bf9\u5e94\u7684\u8868\u5355\u63a7\u4ef6\u5143\u7d20\u7684id<\/code>\u4e00\u6837\u3002<\/p>\n
    demo<\/strong>
    \n\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a    HTML5\u65b0\u589e\u7684form\u5c5e\u6027\u5e94\u7528demo<\/a><\/p>\n
    \u5982\u679c\u60a8\u7684\u6d4f\u89c8\u5668\u652f\u6301HTML5 form<\/code>\u5c5e\u6027\uff0c\u90a3\u4e48\u5728demo\u9875\u9762\u4e2d\u8f93\u5165\u76f8\u5bf9\u5e94\u5185\u5bb9\u63d0\u4ea4\u7684\u65f6\u5019\uff0curl\u5730\u5740\u540e\u9762\u4f1a\u6709\u4e09\u4e2a\u67e5\u8be2\u5b57\u7b26\u4e32\uff0c\u5982\u4e0b\u622a\u56fe(FF4)\uff1a
    \n\"HTML5\u65b0\u589eform\u5c5e\u6027\u6d4b\u8bd5\u622a\u56fe<\/p>\n
    \u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301form\u5c5e\u6027\uff0c\u90a3\u4e48\u70b9\u51fb\u53d1\u9001\u6309\u94ae\u540eurl\u5730\u5740\u540e\u9762\u4f1a\u6709\u4e24\u4e2a\u67e5\u8be2\u5b57\u7b26\u4e32\uff0c\u4f8b\u5982IE7\u6d4f\u89c8\u5668\u4e0b\uff1a
    \n\"HTML5\u65b0\u589eform\u5c5e\u6027demo\u622a\u56fe<\/p>\n
    \u4e09\u3001\u91cd\u7f6e\u9ed8\u8ba4\u884c\u4e3a<\/h3>\n
    \u6709\u4e86HTML5\u7684\u8fd9\u4e2aform<\/code>\u5c5e\u6027\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u91cd\u7f6e\u9ed8\u8ba4\u7684\u4e9b\u8868\u5355\u884c\u4e3a\uff0c\u505a\u4e9b\u201c\u6709\u8da3\u201d\u7684\u4e8b\u60c5\u3002\u4f8b\u5982\uff0c\u9875\u9762\u4e0a\u6709\u4e24\u4e2a\u8868\u5355\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u63d0\u4ea4\u8868\u53551\u7684\u65f6\u5019\uff0c\u201c\u5077\u8d70\u201d\u8868\u53552\u4e2d\u7684\u63a7\u4ef6\u503c\uff0c\u62ff\u53bb\u63d0\u4ea4\uff1b\u800c\u63d0\u4ea4\u8868\u53552\u7684\u65f6\u5019\uff0c\u201c\u5077\u8d70\u201d\u8868\u53551\u4e2d\u67d0\u4e2a\u63a7\u4ef6\u5143\u7d20\u6307\uff0c\u7136\u540e\u63d0\u4ea4\u4e4b\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u5728HTML5\u7684\u4e16\u754c\u91cc\uff0c\u5bf9\u4e8e\u8868\u5355\u5143\u7d20\u800c\u8a00\uff0c\u5c31\u7b97\u4f60\u628a\u5b50\u63a7\u4ef6\u5143\u7d20\u63e3\u5728\u6000\u91cc\u90fd\u662f\u4e0d\u4fdd\u9669\u7684\uff0c\u6709\u53ef\u80fd\u88ab\u522b\u4eba\u62ff\u53bb\u7528\u4e86\u3002\u8fd9\u8ba9\u6211\u60f3\u8d77\u4e86\u4e00\u4e2a\u52a8\u7269\u548c\u4e00\u4e2a\u6210\u8bed\uff1a\u675c\u9e43\uff0c\u96c0\u5360\u9e20\u5de2\u3002<\/p>\n
    \u53e6\u5916\uff0c\u8fd9\u4e2asubmit\u63d0\u4ea4\u6309\u94ae\u4e5f\u662f\u53ef\u4ee5\u4e32\u95e8\u4f7f\u7528\u7684\uff0c\u5c31\u662f\u8868\u53551\u4e2d\u7684\u63d0\u4ea4\u6309\u94ae\u76f4\u63a5\u628a\u8868\u53552\u7ed9\u6574\u4e2a\u63d0\u4ea4\u4e86\uff0c\u8fd9\u4e2a\u771f\u5c3c\u739b\u72e0\uff0c\u4e00\u9505\u7aef\uff0c\u6ee1\u95e8\u65a9~~<\/p>\n
    \u56db\u3001\u6d4f\u89c8\u5668\u7684\u652f\u6301\u60c5\u51b5\uff1f<\/h3>\n
    \u9996\u5148\uff0c\u53ef\u4ee5\u786e\u5b9a\u4e00\u5b9a\u4ee5\u53ca\u80af\u5b9a\u7684\u662fIE6\/IE7\/IE8\u6d4f\u89c8\u5668\u662f\u4e0d\u652f\u6301\u6ef4\uff0c\u5bf9\u4e8e\u5176\u4ed6\u6d4f\u89c8\u5668\u7684\u652f\u6301\u60c5\u51b5\uff0c\u770b\u4e0b\u9762\uff1a<\/p>\n