たとえば、メールアドレスを入力するフィールドをマークすると、コードは次のようになります。
<input type="text" name="customerEmail" autocomplete="email"/>
完全なフォームレイアウトの例を次に示します。
<form method="post" id="usrForm"> <fieldset> <legend>Contact Info</legend> <label for="frmNameA">Name</label> <input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name"> <label for="frmEmailA">Email</label> <input type="email" name="email" id="frmEmailA" placeholder="name@example.com" required autocomplete="email"> <label for="frmEmailC">Confirm Email</label> <input type="email" name="emailC" id="frmEmailC" placeholder="name@example.com" required autocomplete="email"> <label for="frmPhoneNumA">Phone</label> <input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required autocomplete="tel"> <label for="frmShoeSize">Shoe Size</label> <input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5"> <label for="frmFavChocolate">Favorite Type of Chocolate</label> <input name="fav-choc" id="frmFavChocolate" list="chocType"> <datalist id="chocType"> <option value="white"> <option value="milk"> <option value="dark"> </datalist> </fieldset> <fieldset> <legend>Shipping</legend> <label for="frmAddressS">Address</label> <input name="ship-address" required id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address"> <label for="frmCityS">City</label><input name="ship-city" required id="frmCityS" placeholder="New York" autocomplete="shipping locality"><label for="frmStateS">State</label> <input name="ship-state" required id="frmStateS" placeholder="NY" autocomplete="shipping region"> <label for="frmZipS">Zip</label> <input name="ship-zip" required id="frmZipS" placeholder="10011" autocomplete="shipping postal-code"> <label for="frmCountryS">Country</label> <input name="ship-country" required id="frmCountryS" placeholder="USA" autocomplete="shipping country"> <label><input type="checkbox" name="billAndShip" id="cbBillAndShip"> Bill to this address.</label> </fieldset> <fieldset> <legend>Billing</legend> <label for="frmAddressB">Address</label> <input name="bill-address" id="frmAddressB" required placeholder="123 Any Street" autocomplete="billing street-address"><label for="frmCityB">City</label> <input name="bill-city" id="frmCityB" required placeholder="New York" autocomplete="billing locality"> <label for="frmStateB">State</label> <input name="bill-state" id="frmStateB" required placeholder="NY" autocomplete="billing region"> <label for="frmZipB">Zip</label> <input name="bill-zip" id="frmZipB" required placeholder="10011" autocomplete="billing postal-code"> <label for="frmCountryB">Country</label> <input name="bill-country" id="frmCountryB" required placeholder="USA" autocomplete="billing country"> </fieldset> <fieldset> <legend>Payment</legend> <p>Do <b>NOT</b> provide real credit card information in this field.</p> <label for="frmNameCC">Name on card</label> <input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name"> <label for="frmCCNum">Card Number</label> <input name="cardnumber" id="frmCCNum" required autocomplete="cc-number"> <label for="frmCCCVC">CVC</label> <input name="cvc" id="frmCCCVC" required autocomplete="cc-csc"><label for="frmCCExp">Expiry</label> <input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp"> </fieldset> <div> <button class="btn" id="butCheckout">Check Out</button> </div> </form>
モバイルデバイスで表示するためにサイトを最適化することは非常に重要です。 今後、オートコンプリート属性が実装されるリソースが増えることを願っています。 詳細については、 このページの Webデザインの基礎ガイドを参照してください 。 ご質問がある場合は、 フォーラムで質問してください 。
モバイル最適化に関する以前の投稿：
>> Googleウェブマスターツールを使用してブロックされたリソースを明らかにする
>> モバイルデバイスでの検索結果の改善
>> Googleは検索結果でモバイルサイトにフラグを付けます
>> アプリケーションのインデックス作成：現在ロシア語でも
>> Webページの理解を向上させる
>> スマートフォン用の新しいGooglebotユーザーエージェント
>> サイトのモバイルバージョンを改善する方法。 推奨事項とビデオのヒント