HTML5的表单新增属性form用法

by Geelin / Feb 29, 2012

HTML5增加了许多新标签和属性，这之后我将依次把我的所学与大家分享。今天我们来看一个名为form的属性，大家一看到这个单词，很容易就想到了表单标签form了吧，注意哦，这里说的是一个属性——form。

不过大家的联想也是有些靠谱的，因为这个属性就是为处理表单添加的新用法。下面我们来看看它的具体功能吧。

来一段实例代码：

昵称：
邮箱：
密码：
留言：<br /> </p> </div> </div> <div class="col-sm-3 col-xs-12 right_panel"> <div class="blog_inquiry_form"> <h3 class="heading text-center">Need a translation service?</h3> <p class="short_desc text-center">Please enter your personal details and we will contact you shortly</p> <div class="wpcf7 no-js" id="wpcf7-f67171-o1" lang="en-US" dir="ltr"> <div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div> <form action="/html5%E7%9A%84%E8%A1%A8%E5%8D%95%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7form%E7%94%A8%E6%B3%95/#wpcf7-f67171-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="67171" /> <input type="hidden" name="_wpcf7_version" value="5.7.6" /> <input type="hidden" name="_wpcf7_locale" value="en_US" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f67171-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> <input type="hidden" name="_wpcf7_posted_data_hash" value="" /> <input type="hidden" name="_wpcf7_recaptcha_response" value="" /> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"> <style>#mfcf7_zl_add_file{display:none;}.required{color: #ee0000 !important;} label{font: 14px 'opensans-semi-bold' !important; font-weight: normal !important;color: #686868 !important; margin-bottom: 5px; margin-top: 20px;} .wpcf7 input, .wpcf7 select, wpcf7 .select2-container .select2-selection--single, .wpcf7 .select2-selection__rendered{ min-height: 40px !important; font-size: 14px !important; padding: 10px!important; border-radius: 2px !important; background-color: #fff !important; color: #999999 !important; border: 1px solid #d3d3d3 !important; margin-bottom: 0 !important;}.wpcf7 .wpcf7-intl_tel{padding-left: 50px !important;}.wpcf7 textarea{margin-bottom: 0 !important;}.wpcf7 .select2-container .select2-selection--single{height: auto !important; border: none !important; min-height: 30px !important;}.wpcf7 .select2-container .select2-selection--single .select2-selection__rendered{line-height: 18px !important;}.wpcf7 .select2-container--default .select2-selection--single .select2-selection__arrow{height: 38px;}.wpcf7 .select2-container--default .select2-selection--multiple{border: none !important;}.wpcf7 .select2-search__field{display:none !important;}.wpcf7 .wpcf7-submit{ width: 100%; min-width: 160px; border-color: #2499f7 !important; background-color: #2499f7 !important; color: #fff !important; height: auto; font: 14px 'opensans-semi-bold'; padding: 8px 30px !important; margin-top: 20px;}.wpcf7 .wpcf7-file{width: 100%; margin: 20px 0 20px !important;}</style><div class="row"> <div class="col-md-12"> <span class="wpcf7-form-control-wrap" data-name="full_name"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required medium text" id="name" aria-required="true" aria-invalid="false" placeholder="Full Name" value="" type="text" name="full_name" /></span> </div> </div><div class="row"> <div class="col-md-12"> <span class="wpcf7-form-control-wrap phone"><input class="wpcf7-form-control wpcf7-intl-tel wpcf7-intl_tel wpcf7-validates-as-required" aria-required="true" aria-invalid="false" data-initialcountry="us" value="" type="tel" name="phone-cf7it-national" /><input name="phone" type="hidden" class="wpcf7-intl-tel-full" /><input type="hidden" name="phone-cf7it-country-name" class="wpcf7-intl-tel-country-name" /><input type="hidden" name="phone-cf7it-country-code" class="wpcf7-intl-tel-country-code" /><input type="hidden" name="phone-cf7it-country-iso2" class="wpcf7-intl-tel-country-iso2" /></span> </div> </div><div class="row"> <div class="col-md-12"> <span class="wpcf7-form-control-wrap" data-name="email"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email medium text" id="email" aria-required="true" aria-invalid="false" placeholder="Email" value="" type="email" name="email" /></span> </div> </div><div class="row"> <div class="col-md-12 ccjk_half"> <span class="wpcf7-form-control-wrap" data-name="source_language"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required chosen-field form-control chosen-select multiple-select medium" id="source_language" aria-required="true" aria-invalid="false" name="source_language"><option value="Arabic">Arabic</option><option value="Chinese Simplified">Chinese Simplified</option><option value="Chinese Traditional">Chinese Traditional</option><option value="Danish">Danish</option><option value="Dari">Dari</option><option value="Dutch">Dutch</option><option value="English">English</option><option value="Finnish">Finnish</option><option value="French">French</option><option value="German">German</option><option value="Greek">Greek</option><option value="Hindi">Hindi</option><option value="Indonesian">Indonesian</option><option value="Italian">Italian</option><option value="Japanese">Japanese</option><option value="Korean">Korean</option><option value="Latvian">Latvian</option><option value="Norwegian, Bokmål">Norwegian, Bokmål</option><option value="Polish">Polish</option><option value="Portuguese">Portuguese</option><option value="Punjabi">Punjabi</option><option value="Russian">Russian</option><option value="Sinhala">Sinhala</option><option value="Spanish">Spanish</option><option value="Swedish">Swedish</option><option value="Tamil">Tamil</option><option value="Thai">Thai</option><option value="Turkish">Turkish</option><option value="Ukrainian">Ukrainian</option><option value="Urdu">Urdu</option><option value="Vietnamese">Vietnamese</option><option value="Burmese">Burmese</option></select></span> </div> </div> <div class="row"> <div class="col-md-12 ccjk_half language_row"> <span class="wpcf7-form-control-wrap" data-name="target_language"><select class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required chosen-field form-control chosen-select multiple-select medium" id="target_language" aria-required="true" aria-invalid="false" multiple="multiple" name="target_language[]"><option value="Arabic">Arabic</option><option value="Chinese Simplified">Chinese Simplified</option><option value="Chinese Traditional">Chinese Traditional</option><option value="Danish">Danish</option><option value="Dari">Dari</option><option value="Dutch">Dutch</option><option value="English">English</option><option value="Finnish">Finnish</option><option value="French">French</option><option value="German">German</option><option value="Greek">Greek</option><option value="Hindi">Hindi</option><option value="Indonesian">Indonesian</option><option value="Italian">Italian</option><option value="Japanese">Japanese</option><option value="Korean">Korean</option><option value="Latvian">Latvian</option><option value="Norwegian, Bokmål">Norwegian, Bokmål</option><option value="Polish">Polish</option><option value="Portuguese">Portuguese</option><option value="Punjabi">Punjabi</option><option value="Russian">Russian</option><option value="Sinhala">Sinhala</option><option value="Spanish">Spanish</option><option value="Swedish">Swedish</option><option value="Tamil">Tamil</option><option value="Thai">Thai</option><option value="Turkish">Turkish</option><option value="Ukrainian">Ukrainian</option><option value="Urdu">Urdu</option><option value="Vietnamese">Vietnamese</option><option value="Burmese">Burmese</option></select></span> </div> </div><div class="row"> <div class="col-md-12 "> <span class="wpcf7-form-control-wrap" data-name="word_count"><input class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number medium" id="word_count" min="1" aria-invalid="false" placeholder="Word Count" value="" type="number" name="word_count" /></span> </div> </div><div class="row"> <div class="col-md-12 "> <span class="wpcf7-form-control-wrap" data-name="description"><textarea cols="40" rows="2" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Description" name="description">

Words translated by CCJK

146,096,379

Our Client Satisfaction

Rating for previous quarter

5.00

HTML5的表单新增属性form用法

Words translated by CCJK

Our Client Satisfaction

CCJK BLOGS

TRANSLATION SOLUTIONS

Resources

About CCJK