CodeCraneé¶Žæµ
# ð èªåãã©ãŒã å ¥å Chrome æ¡åŒµæ©èœ ## ð æŠèŠ ãã® Chrome æ¡åŒµæ©èœã¯ããŠã§ãããŒãžäžã®ãã©ãŒã ãèªåçã«å ¥åããããã«èšèšãããŠããŸãã<br> ããŒã¯ãŒããããã³ã°æ©èœã«ãã£ãŠãåãã©ãŒã ãã£ãŒã«ãã®çš®é¡ãç¹å®ããé©åãªããŒã¿ã§å ¥åããŸãã<br> ãŠãŒã¶ãŒã¯ãã«ã¹ã¿ã ãããã¡ã€ã«ãä¿åããã³ããŒãããŠã奜ã¿ã®ããŒã¿ã§ãã©ãŒã ãçŽ æ©ãå ¥åããããšãã§ããŸãã ## ð æ©èœ - **èªåãã©ãŒã å ¥å:** ãã£ãŒã«ãã©ãã«ãIDãããã³ååã«åºã¥ããŠãã©ãŒã ãã£ãŒã«ããèªåçã«å ¥åããŸãã - **ã«ã¹ã¿ã ãããã¡ã€ã«:** ç°ãªããã©ãŒã å ¥åã·ããªãªçšã«ã«ã¹ã¿ã ãããã¡ã€ã«ãä¿åããã³ããŒãã§ããŸãã - **ãããŒããã¹ãçæ:** æå®ãããé·ãã®ãããŒããã¹ããããã¹ããšãªã¢ã«çæããŸãã ### â¬ å ¥åãã㌠1. ãããã¡ã€ã«ã«å ¥åãããããã€ã`FIELD_KEYWORDS`ã®å€ã«`name,id,label,type`ã®ããããéšåäžèŽããå€ãããã°å ¥åãããŸã 2. ãããã¡ã€ã«ã«å ¥åããªãå Žåã¯ãã©ãŒã èŠçŽ ãã以äžã®é ã§ããã¹ããååŸããŠå ¥åãããŸã 1. `type="tel"`ã®å Žåã¯`000-0000-0000` 2. `type="email"`ã®å Žåã¯`[email protected]` 3. `type="date"`ã®å Žåã¯ä»æ¥ã®æ¥ä» 4. `label[for="id"]` 5. èŠªçŽ èŠçŽ ã® label 6. å åŒèŠçŽ 7. placeholder 3. `type="checkbox"`ã¯å šãŠãã§ãã¯ãããŸã 4. `type="radio"`ã¯éžæè¢æåŸã® radio ããã§ãã¯ãããŸã 5. `<select></select>`ã¯éžæè¢æåŸã® option ãéžæãããŸã 6. `<textarea></textarea>`ã¯ãããã¡ã€ã«ã§èšå®ããæåæ°ã®ãããŒããã¹ããå ¥åãããŸã - ãããã¡ã€ã«ã«èšå®ããªãå Žå㯠500 æåãããã©ã«ãã§å ¥åãããŸã ### âïž æ³å®ããŠãã HTML æ§é 以äžã®æ§é ã«è©²åœããå Žåã«ããŒã¯ãŒããšãããã³ã°ããèŠçŽ ãç¹å®ããŸã ::: label ã® `for屿§`ãš input ã®`id`ãåäžã§ãã ```html <div> <label for="your-mail">ã¡ãŒã«ã¢ãã¬ã¹</label> <input id="your-mail" /> </div> ``` ::: label ã§å²ãŸããããã¹ããš input ã§ãã(3 éå±€ãŸã§èŠªèŠçŽ ã蟿ã£ãŠè¿œè·¡) ```html <label> <div> <span>ã¡ãŒã«ã¢ãã¬ã¹</span> </div> <div> <div> <input /> </div> </div> </label> ``` ::: input ããå è¡ããŠããå åŒèŠçŽ ããã('label, div, span, p, h1, h2, h3, h4, h5, h6, small') ```html <div> <span>ã¡ãŒã«ã¢ãã¬ã¹</span> <input /> </div> ``` ::: input ã«æ£ãã`placeholder`ãèšå®ãããŠãã ```html <input placeholder="äŸïŒ[email protected]" /> ``` #### ðš ã¡ãŒã«ã¢ãã¬ã¹ãšé»è©±çªå·ã«ã€ã㊠äžèšã®æ¹æ³ã§ç¹å®ãã input ã - `type="mail"` - `type="tel"` ã§ããã€**ãããã¡ã€ã«ã«èšå®ããªã**å Žåã¯ããããã - `[email protected]` - `000-0000-0000` ãå ¥åãããŸã ### â 察å¿ã§ããªã HTML æ§é 以äžã®æ§é ã«è©²åœããå Žåã¯æ³å®ãããªãããã¹ããå ¥åãããå ŽåãããããŸãã ::: äžã€ã®ã©ãã«ã«å¯ŸããŠè€æ°ã® input ããã ```html <div> <label>éµäŸ¿çªå·</label> <input /> <input /> </div> ``` ::: ããã³ãã«èŠããªãã©ãã«ããã¹ããå åŒèŠçŽ ã«ããå Žå ```html <dl> <div> <dt>ãµãããª</dt> <dd> <span style="visibility: hidden;">ååã®ãµãããª</span> <input /> </dd> </div> </dl> ``` ::: ãã®ä» - `label`ããªã - `for屿§`ãš`id`ãçŽã¥ããŠããªã - `placeholder`ããªã ãªã©ã¯ãã©ãŒã ã®æ§é ãšããŠäžé©åãªã®ã§ã<br> å ¥åãããªãé ç®ããã£ãå Žåã¯ãæ§ç¯æ¹æ³ããèŠçŽãããšãæšå¥šããŸã ## ðââïž å 責äºé - ãšã³ãžãã¢ããã¹ã¿ãŒãéçºè åãããŒã«ã§ããå¶æ¥ã§ã®äœ¿çšã¯æ³å®ãããŠãããŸããã - ãã®æ¡åŒµæ©èœã䜿çšããŠèµ·ããäžå ·åãæå®³ã«ã€ããŠã¯äžåã®è²¬ä»»ãè² ããŸããã®ã§èªå·±è²¬ä»»ã§ãå©çšãã ããã