ãã®ç¯ã¯éèŠç¯çã§ããã
ãã©ãŒã ã¯ãããã¹ããã£ãŒã«ãããã¿ã³ããã§ãã¯ããã¯ã¹ãã¬ã³ãžã³ã³ãããŒã«ããŸãã¯ã«ã©ãŒããã«ãŒãªã©ããã©ãŒã ã³ã³ãããŒã«ãæã€ãŠã§ãããŒãžã®ã³ã³ããŒãã³ãã§ããããããªãåŠçïŒããšãã°ãæ€çŽ¢ãŸãã¯èšç®çµæãè¿ãïŒã«å¯ŸããŠãµãŒããŒã«éä¿¡ã§ããããŒã¿ãæäŸããŠããŠãŒã¶ãŒã¯ãã®ãããªãã©ãŒã ã§æ å ±ã亀æã§ãããã¹ã¯ãªããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãè£åŒ·ãããããŸãã¯ãµãŒããŒã«ããŒã¿ãéä¿¡ãã以å€ã®æçŸ©ã«å¯ŸããŠãã©ãŒã ã䜿çšã§ãããããªAPIãå©çšå¯èœã§ããããå€ãã®å Žåã¯ã©ã€ã¢ã³ãåŽã®ã¹ã¯ãªããã¯å¿ èŠãªãã
ãã©ãŒã ã®èšè¿°ã¯ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãèšè¿°ããããµãŒããŒåŽã®åŠçãå®è£ ããããã®ãµãŒããŒãšéä¿¡ããããã®ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§æãããšãããä»»æã®é åºã§å®è¡ãããè€æ°ã®ã¹ãããããæãã
ãã®ç¯ã¯éèŠç¯çã§ããã
ãã®ç°¡åãªæåŒãã®ç®çã«å¯ŸããŠããã¶ã泚æãããã©ãŒã ãäœæããã
ãã¹ãŠã®ãã©ãŒã ã¯ãå
éšã«ã³ã³ãããŒã«ãé
眮ãããformèŠçŽ ã§å§ãŸããã»ãšãã©ã®ã³ã³ãããŒã«ã¯ãããã©ã«ãã§1è¡ã®ããã¹ããã£ãŒã«ããæäŸããinputèŠçŽ ã«ãã£ãŠè¡šããããã³ã³ãããŒã«ãã©ãã«ä»ãããããã«ãlabelèŠçŽ ã䜿çšããããã©ãã«ããã¹ãããã³ã³ã³ãããŒã«èªèº«ã¯ãlabelèŠçŽ ã®äžã«å
¥ãããã©ãŒã ã®åéšåã¯æ®µèœãšã¿ãªãããéåžžã¯pèŠçŽ ã䜿çšããŠä»ã®éšåããåé¢ãããããããäžç·ã«çœ®ããšãããã¯é¡§å®¢ã®ååãå°ããããšãã§ããæ¹æ³ã®äžã€ã§ããïŒ
<form> <p><label>Customer name: <input></label></p> </form>
ãŠãŒã¶ãŒã«ãã¶ã®ãµã€ãºãéžæãããããã«ãã©ãžãªãã¿ã³ã®ã»ããã䜿çšã§ãããã©ãžãªãã¿ã³ã¯ãŸããä»åã¯å€ã®radioãšãšãã«type屿§ããã€ãinputèŠçŽ ã䜿çšãããã°ã«ãŒããšããŠã©ãžãªãã¿ã³ãåäœãããããã«ããããã¯name屿§ã䜿çšããŠãå
±éã®ååãäžããããããã®å Žåãã©ãžãªãã¿ã³ã®ããã«ãäžç·ã«ã³ã³ãããŒã«ã®ããããã°ã«ãŒãåããããã«ãfieldsetèŠçŽ ã䜿çšã§ãããã³ã³ãããŒã«ã®ã°ã«ãŒãã®ãããªã¿ã€ãã«ã¯ãfieldsetå
ã®æåã®èŠçŽ ã§äžãããããããã¯ãlegendèŠçŽ ã§ããå¿
èŠãããã
<form> <p><label>Customer name: <input></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> </form>
åã®ã¹ãããããã®å€æŽç¹ã匷調衚瀺ãããã
ãããã³ã°ãéžã¶ããã«ããã§ãã¯ããã¯ã¹ã䜿çšã§ããããããã¯ãå€checkboxããã€type屿§ãšãšãã«inputèŠçŽ ã䜿çšããã
<form> <p><label>Customer name: <input></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> </form>
ãã®ãã©ãŒã ã§æ³šæãããã¶å±ã¯ããã€ãééããããã®ã§ã顧客ã«é£çµ¡ããæ¹æ³ãå¿
èŠãšããããã®ç®çã®ããã«ãé»è©±çªå·ïŒtelã«èšå®ãããtype屿§ããã€inputèŠçŽ ïŒãããã³é»åã¡ãŒã«ã¢ãã¬ã¹ïŒemailã«èšå®ãããtype屿§ããã€inputèŠçŽ ïŒã«å¯ŸããŠãã©ãŒã ã³ã³ãããŒã«ãç¹å¥ã«äœ¿çšã§ããïŒ
<form> <p><label>Customer name: <input></label></p> <p><label>Telephone: <input type=tel></label></p> <p><label>E-mail address: <input type=email></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> </form>
é
éæéãå°ããããã«timeã«èšå®ãããtype屿§ã«inputèŠçŽ ã䜿çšã§ããããã©ãŒã ã³ã³ãããŒã«ã®å€ãã¯ãå€ãæå®ã§ãããã®ãæ£ç¢ºã«å¶åŸ¡ããããã®å±æ§ãæã€ããã®å Žåãç¹ã«é¢å¿ã®ãã3ã€ã®å±æ§ã¯ãminãmaxãããã³stepã§ããããããã¯ãæå°æéãæå€§æéãåã³èš±å¯ãããå€ã®ééïŒç§åäœã§ïŒãèšå®ããããã®ãã¶ã¯ãåå11æãšååŸ9æã®éã§é
éããã15åå»ã¿ä»¥äžãçŽæãããã®ã§ãªããæ¬¡ã®ããã«ããŒã¯ã¢ããã§ããïŒ
<form> <p><label>Customer name: <input></label></p> <p><label>Telephone: <input type=tel></label></p> <p><label>E-mail address: <input type=email></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p> </form>
textareaèŠçŽ ã¯ãèªç±åœ¢åŒã®ããã¹ããã£ãŒã«ããæäŸããããã«äœ¿çšã§ããããã®æèã«ãããŠãé
éæç€ºãäžããããã«é¡§å®¢ã«å¯ŸããŠã¹ããŒã¹ãæäŸããããã«èŠçŽ ã䜿çšããããšããŠããïŒ
<form> <p><label>Customer name: <input></label></p> <p><label>Telephone: <input type=tel></label></p> <p><label>E-mail address: <input type=email></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p> <p><label>Delivery instructions: <textarea></textarea></label></p> </form>
æåŸã«ããã©ãŒã ãæçš¿å¯èœã«ããããã«ãbuttonèŠçŽ ã䜿çšããïŒ
<form> <p><label>Customer name: <input></label></p> <p><label>Telephone: <input type=tel></label></p> <p><label>E-mail address: <input type=email></label></p> <fieldset> <legend> Pizza Size </legend> <p><label> <input type=radio name=size> Small </label></p> <p><label> <input type=radio name=size> Medium </label></p> <p><label> <input type=radio name=size> Large </label></p> </fieldset> <fieldset> <legend> Pizza Toppings </legend> <p><label> <input type=checkbox> Bacon </label></p> <p><label> <input type=checkbox> Extra Cheese </label></p> <p><label> <input type=checkbox> Onion </label></p> <p><label> <input type=checkbox> Mushroom </label></p> </fieldset> <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p> <p><label>Delivery instructions: <textarea></textarea></label></p> <p><button>Submit order</button></p> </form>
ãã®ç¯ã¯éèŠç¯çã§ããã
ãµãŒããŒåŽã®åŠçæ©æ§ã®èšè¿°ã«å¯Ÿããæ£ç¢ºãªè©³çްã¯ããã®ä»æ§æžã®ç¯å²å€ã§ããããã®æåŒãã®ç®çã®ããã«ãHTTP POSTããã£å
ã§ä»¥äžã®ãã©ã¡ãŒã¿ãéä¿¡ããããšæåŸ
ããhttps://pizza.example.com/order.cgiã§ã¹ã¯ãªãããapplication/x-www-form-urlencoded圢åŒã䜿çšããŠæçš¿ãåãä»ããèšå®ããããŠãããšä»®å®ããïŒ
custnamecusttelcustemailsizesmallãmediumããŸãã¯largeã®ããããã®ããã¶ã®ãµã€ãºtoppingbaconãcheeseãonionãããã³mushroomããã€ãåéžæããããããã³ã°ã«å¯ŸããŠäžåºŠã«æå®ããããdeliverycommentsãã®ç¯ã¯éèŠç¯çã§ããã
ãã©ãŒã ã®éä¿¡ã¯ãæãäžè¬çãªHTTP GETãŸãã¯POSTãªã¯ãšã¹ããšããŠãçš®ã
ã®æ¹æ³ã§ãµãŒããŒã«å
¬éãããã䜿çšãããæ£ç¢ºãªæ¹æ³ãæå®ããããã«ãmethod屿§ã¯formèŠçŽ ã§æå®ãããããã ããããã¯ãã©ãŒã ããŒã¿ãã©ã®ããã«ãšã³ã³ãŒããããããæå®ããªããæå®ããããã«ã¯ãenctype屿§ã䜿çšããããŸããaction屿§ã䜿çšããŠãéä¿¡ãããããŒã¿ãåŠçãããµãŒãã¹ã®URLãæå®ããå¿
èŠãããã
æåºãããåãã©ãŒã ã³ã³ãããŒã«ã«ã€ããŠãæåºã§ã®ããŒã¿ãåç
§ããããã«äœ¿çšãããååãä»ããå¿
èŠãããããã§ã«ãã©ãžãªãã¿ã³ã®ã°ã«ãŒãã®ååãæå®ããŠãããåã屿§ïŒnameïŒãæåºåãæå®ãããã©ãžãªãã¿ã³ã¯value屿§ã䜿çšããŠãããããã«ç°ãªãå€ãäžããããšã«ããæåºã§äºãã«åºå¥ã§ããã
è€æ°ã®ã³ã³ãããŒã«ã¯ãåãååãæã€ããšãã§ãããããšãã°ããã¹ãŠã®ãã§ãã¯ããã¯ã¹ã«åãååãäžãããµãŒããŒã¯ãã©ã®å€ããã®ååã§æåºãããããèŠãããšã«ãã£ãŠãã©ã®ãã§ãã¯ããã¯ã¹ããã§ãã¯ãããããåºå¥ããâã©ãžãªãã¿ã³ã®ããã«ããããã¯ãŸããvalue屿§ãæã€äžæãªå€ãäžããããã
åç¯ã®èšå®ãèããã°ã次ã®ããã«ãªãïŒ
<form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname"></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size value="small"> Small </label></p>
<p><label> <input type=radio name=size value="medium"> Medium </label></p>
<p><label> <input type=radio name=size value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
<p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
<p><button>Submit order</button></p>
</form>
屿§ãåŒçšç¬Šã§å²ãŸããå€ãæã£ããå²ãŸããªãã£ããããããç¹ã«æå³ã¯ãªããæ§æã®ã»ã¯ã·ã§ã³ã§èª¬æãããããã«ãHTMLæ§æã¯å±æ§ãæå®ããããã®ç䟡ã§åŠ¥åœãªæ§ã ãªæ¹æ³ãå¯èœã«ããã
ããšãã°ã顧客ãèªåã®ååãšããŠ"Denise Lawrence"ãé»è©±çªå·ãšããŠ"555-321-8642"ãšå ¥åããé»åã¡ãŒã«ã¢ãã¬ã¹ãæå®ãããäžåãã¶ãæ±ãã远å ã§ããŒãºãšããã³ã®ãããã³ã°ãéžæããååŸ7æã®é éæéãå ¥åããé éæç€ºã®ããã¹ããã£ãŒã«ãã空çœã®ãŸãŸã«ããå ŽåããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããªã³ã©ã€ã³ãŠã§ããµãŒãã¹ã«ä»¥äžãéä¿¡ããã ããïŒ
custname=Denise+Lawrence&custtel=555-321-8624&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=
ãã®ç¯ã¯éèŠç¯çã§ããã
ãã©ãŒã ã¯ããã©ãŒã ãéä¿¡ãããåã«ãã©ã®ããã«ãŠãŒã¶ãŒãšãŒãžã§ã³ãããŠãŒã¶ãŒã®å ¥åããã§ãã¯ãããã®ãããªæ³šéãä»ããããšãã§ãããïŒæªæãããŠãŒã¶ãŒãç°¡åã«ãã©ãŒã ã®æ€èšŒãè¿åããããšãã§ããã®ã§ïŒãµãŒãã¯äŸç¶ãšããŠå ¥åã劥åœã§ããããšã確èªããå¿ èŠããããããŠãŒã¶ãŒã¯ããŠãŒã¶ãŒã®å ¥åã®ç¬å çãªãã§ãã«ãŒã§ãããµãŒããŒãæã€ããšã«ãã£ãŠçºçããåŸ ã¡æéãåé¿ã§ããã
æãç°¡åãªæ³šéã¯ãå€ãæå®ããããŸã§ãã©ãŒã ãéä¿¡ãããªãããšã瀺ãããã«inputèŠçŽ ã§æå®ã§ãããrequired屿§ã§ããã顧客ã®ååãšé
éæéã®ãã£ãŒã«ãã«ãã®å±æ§ã远å ããããšã«ãã£ãŠããŠãŒã¶ãŒããã£ãŒã«ãã«å
¥åããã«ãã©ãŒã ãéä¿¡ããéã«ããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãŠãŒã¶ãŒã«éç¥ã§ããïŒ
<form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname" required></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size required value="small"> Small </label></p>
<p><label> <input type=radio name=size required value="medium"> Medium </label></p>
<p><label> <input type=radio name=size required value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
<p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
<p><button>Submit order</button></p>
</form>
maxlength屿§ã䜿çšããŠãå
¥åã®é·ããå¶éããããšãå¯èœã§ãããtextareaèŠçŽ ã«ããã远å ããããšã«ãã£ãŠããŠãŒã¶ãŒã«1000æåã®å¶éãã§ããçŠç¹ãåãããŠçãŸã代ããã«å¿ããé
éãã©ã€ããŒã«å¯ŸããŠãŠãŒã¶ãŒã巚倧ãªãšãã»ã€ãæžããªãããã«ããã
<form method="post"
enctype="application/x-www-form-urlencoded"
action="https://pizza.example.com/order.cgi">
<p><label>Customer name: <input name="custname" required></label></p>
<p><label>Telephone: <input type=tel name="custtel"></label></p>
<p><label>E-mail address: <input type=email name="custemail"></label></p>
<fieldset>
<legend> Pizza Size </legend>
<p><label> <input type=radio name=size required value="small"> Small </label></p>
<p><label> <input type=radio name=size required value="medium"> Medium </label></p>
<p><label> <input type=radio name=size required value="large"> Large </label></p>
</fieldset>
<fieldset>
<legend> Pizza Toppings </legend>
<p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
<p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
<p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
<p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
</fieldset>
<p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
<p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
<p><button>Submit order</button></p>
</form>
ãã©ãŒã ãéä¿¡ãããéãinvalidãªã€ãã³ãã¯ãç¡å¹ãªåãã©ãŒã ã³ã³ãããŒã«ã§çºç«ãããã®åŸformèŠçŽ èªèº«ã§ãå
žåçã«ãã©ãŠã¶èªäœã¯äžåºŠã«äžã€ã®åé¡ãå ±åããã®ã§ãããã¯ãã©ãŒã ã«é¢ããåé¡ã®èŠçŽã衚瀺ããããã«æçšã§ããããã
ãã®ç¯ã¯éèŠç¯çã§ããã
ãã®ãã¶é éã®äŸã«ãããŠãæå»ã¯ã24æé圢åŒã§2æ¡ã®æéãš2æ¡ã®åã圢åŒ"HH:MM"ã§æå®ããããïŒãã®äŸã«ãããŠå¿ èŠãªãããç§ããŸãæå®ã§ãããïŒ
ãããããŠãŒã¶ãŒã«æç€ºãããéãäžéšã®ãã±ãŒã«ã«ãããŠãæå»ã¯ãã°ãã°ç°ãªã£ã衚çŸããªããããããšãã°ãã¢ã¡ãªã«ã§ã¯"2pm"ã®ããã«ãam/pm衚瀺ä»ãã®12æéå¶ã䜿çšããã®ãäžè¬çã§ããããã©ã³ã¹ã§ã¯"14h00"ã®ããã«ã"h"ã®æåãçšããŠæéãšåãåé¢ããã®ãäžè¬çã§ããã
ã³ã³ããŒãã³ãã®é åºãåžžã«äžè²«ããªããããªè€éãªé¢ä¿ãä»å ããããšãšãã«ãæ¥ä»ã«åæ§ã®åé¡ãååšããâããšãã°ããããã¹ã§2003幎2æ1æ¥ã¯äžè¬ã«"1/2/03"ãšæžãããäžæ¹ã§æ¥æ¬ã«ãããŠåãæ¥ä»ã¯äžè¬ã«"2003幎02æ01æ¥"ã®ããã«æžãããã ããâæ°åãšå¹³è¡ããŠãããšãã°ãã©ã®ãããªå¥èªç¹ãå°æ°ç¹èšå·ãæ¡åºåãèšå·ãšããŠäœ¿çšããããšããç¹ã§ãã±ãŒã«ãç°ãªãã
ãããã£ãŠããã©ãŠã¶ã§ãŠãŒã¶ãŒã«æç€ºããããã©ãŠã¶ã§ãŠãŒã¶ãŒããã®å ¥åãšããŠåãå ¥ããããæå»ãæ¥ä»ãããã³æ°å€åœ¢åŒãããåžžã«åœ¢åŒããã®ä»æ§ã§å®çŸ©ãããïŒããã³ã³ã³ãã¥ãŒã¿å¯èªã®æ¥ä»ãšæå»ã®åœ¢åŒã«å¯ŸããŠååã«ç¢ºç«ãããISO 8601èŠæ Œã«åºã¥ãïŒå ŽåãHTMLãšãã©ãŒã ã®éä¿¡ã§äœ¿çšãããæå»ãæ¥ä»ãããã³æ°å€åœ¢åŒãåºå¥ããããšãéèŠã§ããã
圢åŒã¯"ã¯ã€ã€äžã§"䜿çšããããããªãã¡ãHTMLããŒã¯ã¢ãããšãã©ãŒã ã®éä¿¡ã§ãããã¯ã³ã³ãã¥ãŒã¿å¯èªããã³ãŠãŒã¶ãŒã®ãã±ãŒã«ã«é¢ããããäžè²«æ§ãããããšãæå³ãããããšãã°ãæ¥ä»ã¯åžžã«"2003-02-01"ã®ããã«ã圢åŒ"YYYY-MM-DD"ã§èšè¿°ãããããŠãŒã¶ãŒã¯ããããŸã§ã«ãã®åœ¢åŒãåç §ããããšãæåŸ ãããŠããªãã
æå»ãæ¥ä»ããŸãã¯ã¯ã€ã€åœ¢åŒã§ããŒãžã«ãã£ãŠäžããããæ°åã¯ããŠãŒã¶ãŒã«è¡šç€ºãããåã«ãïŒãŠãŒã¶ãŒèšå®ã«åºã¥ãããããŒãžèªèº«ã®ãã±ãŒã«ã«åºã¥ããŠïŒãŠãŒã¶ãŒã®å¥œã¿ã®è¡šçŸã«å€æããããåæ§ã«ããŠãŒã¶ãŒã¯ã奜ã¿ã®åœ¢åŒã䜿çšããŠãæå»ãæ¥ä»ããŸãã¯æ°å€ã®å ¥åããåŸã«ããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãDOMã«å ¥ãããŸãã¯éä¿¡ããåã«ãã¯ã€ã€åœ¢åŒã«æ»ã£ãŠå€æããã
äŸç¶ãšããŠãŠãŒã¶ãŒã®ããŒãºããµããŒãããäžæ¹ã§ãããã¯ãããŒãžå ããµãŒããŒäžã®ã¹ã¯ãªããã«ã倿°ã®ç°ãªããã©ãŒãããããµããŒãããå¿ èŠãªãã«ãäžè²«æ§ã®ããæ¹æ³ã§ãæå»ãæ¥ä»ãããã³æ°å€ãåŠçã§ããã
See also the implementation notes regarding localization of form controls.
å€ãã®æŽå²çãªçç±ã®ããã«ããã®ç¯ã«ãããèŠçŽ ã¯ããããŒã³ã³ãã³ãããã¬ãŒãžã³ã°ã³ã³ãã³ããããã³ã€ã³ã¿ã©ã¯ãã£ãã³ã³ãã³ãã®ããã«éåžžã®ãã®ã«å ããŠãè€æ°ã®ïŒããã埮åŠã«ç°ãªãïŒã«ããŽãªãéè€ããŠåé¡ãããã
èŠçŽ ã®æ°ã¯ããã©ãŒã ææè ãæã€ããšãã§ããããšãæå³ããããã©ãŒã é¢é£èŠçŽ ã§ããã
ãã©ãŒã é¢é£èŠçŽ ã¯ãè€æ°ã®ãµãã«ããŽãªã«åé¡ãããïŒ
form.elementsãšfieldset.elements APIã«èšèŒãããèŠçŽ ã衚ãã
formèŠçŽ ãéä¿¡ãããéã«èšå®ãããã©ãŒã ã®ããŒã¿ãäœæããããã«çšããããšã®ã§ããèŠçŽ ã瀺ãã
äžéšã®éä¿¡å¯èœèŠçŽ ã¯ããã®å±æ§ãã¿ã³ã«å¿ããŠååšã§ãããèŠçŽ ããã¿ã³ã§ããå Žåã以äžã®æãå®çŸ©ããããäžéšã®ãã¿ã³ã¯ãç¹ã«éä¿¡ãã¿ã³ã§ããã
formèŠçŽ ããªã»ãããããéã«åœ±é¿ãåããã ããèŠçŽ ã瀺ãã
formã³ã³ãã³ã屿§ãããã³èè
ãæç€ºçã«ãã©ãŒã ææè
ãæå®ã§ãããäžèŽããformIDL屿§ãæã€èŠçŽ ã衚ãã
ãã©ãŒã é¢é£ã®ãã¹ãŠã§ãªããäžéšã®èŠçŽ ãã©ãã«ä»ãå¯èœèŠçŽ ãšããŠåé¡ããããããã¯ãlabelèŠçŽ ã«é¢é£ä»ããããšãã§ããèŠçŽ ã§ããã
buttoninputïŒtype屿§ãHiddenç¶æ
ã§ãªãå ŽåïŒkeygenmeteroutputprogressselecttextareaformèŠçŽ formèŠçŽ ã®åå«ãé€ããaccept-charset - ãã©ãŒã éä¿¡ã«äœ¿çšããæåãšã³ã³ãŒãã£ã³ã°action - ãã©ãŒã éä¿¡ã«äœ¿çšããURLautocomplete - ãã©ãŒã å
ã®ã³ã³ãããŒã«ã®ãªãŒã«ãã£ã«æ©èœã«å¯Ÿããããã©ã«ãèšå® enctype - ãã©ãŒã éä¿¡ã«äœ¿çšããæåãšã³ã³ãŒãã£ã³ã°ãèšå®ãããã©ãŒã ããŒã¿method - ãã©ãŒã éä¿¡ã«äœ¿çšããHTTPã¡ãœããname - document.forms APIã§äœ¿çšããããã®ãã©ãŒã ånovalidate - ãã©ãŒã éä¿¡ã®ããã®ãã©ãŒã ã³ã³ãããŒã«æ€èšŒãåé¿ããtarget - ãã©ãŒã éä¿¡ã«å¯Ÿãããã©ãŠãžã³ã°ã³ã³ããã¹ãaria-*屿§ã[OverrideBuiltins]
interface HTMLFormElement : HTMLElement {
attribute DOMString acceptCharset;
attribute DOMString action;
attribute DOMString autocomplete;
attribute DOMString enctype;
attribute DOMString encoding;
attribute DOMString method;
attribute DOMString name;
attribute boolean noValidate;
attribute DOMString target;
readonly attribute HTMLFormControlsCollection elements;
readonly attribute long length;
getter Element (unsigned long index);
getter (RadioNodeList or Element) (DOMString name);
void submit();
void reset();
boolean checkValidity();
};
formèŠçŽ ã¯ãåŠçã®ããã«ãµãŒããŒã«éä¿¡ã§ããç·šéå¯èœãªå€ã衚ãããšãã§ããäžéšã§ããã©ãŒã é¢é£èŠçŽ ã®ã³ã¬ã¯ã·ã§ã³ã衚ãã
accept-charset屿§ã¯éä¿¡ã«å¯ŸããŠäœ¿çšãããæåãšã³ã³ãŒãã£ã³ã°ãæäŸãããæå®ããå Žåãå€ã¯ASCII倧æåã»å°æåäžåºå¥ãªäžæãªã¹ããŒã¹åºåãããŒã¯ã³ã®é åºä»ããããã»ããã§ãªããã°ãªãããåããŒã¯ã³ã¯ASCIIäºææåãšã³ã³ãŒãã£ã³ã°ã®ã©ãã«ãšASCII倧æåã»å°æåäžåºå¥ã§äžèŽããªããã°ãªããªãã[ENCODING]
name屿§ã¯formsã³ã¬ã¯ã·ã§ã³å
ã®formã®ååã衚ããå€ã¯ç©ºæååã§ãã£ãŠã¯ãªããããããªãå Žåããå€ã¯formsã³ã¬ã¯ã·ã§ã³ã®formèŠçŽ ã®äžã§äžæã§ãªããã°ãªããªãã
autocomplete屿§ã¯åæå±æ§ã§ããããã®å±æ§ã¯2ã€ã®ç¶æ
ãæã€ãonããŒã¯ãŒãã¯onç¶æ
ã«å¯Ÿå¿ããoffããŒã¯ãŒãã¯offç¶æ
ã«å¯Ÿå¿ããã屿§ã¯çç¥ãããŠããããæ¬ æå€ã®ããã©ã«ãã¯onç¶æ
ã§ãããoffç¶æ
ã¯ããã©ã«ãã§ããã©ãŒã å
ã®ãã©ãŒã ã³ã³ãããŒã«ããªãŒããã£ã«ãã£ãŒã«ãåã"off"ã«èšå®ãããããšã瀺ããonç¶æ
ã¯ããã©ã«ãã§ããã©ãŒã å
ã®ãã©ãŒã ã³ã³ãããŒã«ããªãŒããã£ã«ãã£ãŒã«ãåã"on"ã«èšå®ãããããšã瀺ãã
actionãenctypeãmethodãnovalidateãããã³target屿§ã¯ãã©ãŒã éä¿¡ã«å¯Ÿãã屿§ã§ããã
elementsãã©ãŒã ïŒæŽå²çãªçç±ã§ã€ã¡ãŒãžãã¿ã³ãé€ãïŒã§ã®ãã©ãŒã ã³ã³ãããŒã«ã®HTMLCollectionãè¿ãã
lengthãã©ãŒã ïŒæŽå²çãªçç±ã§ã€ã¡ãŒãžãã¿ã³ãé€ãïŒã«ããããã©ãŒã ã³ã³ãããŒã«ã®æ°ãè¿ãã
ãã©ãŒã ïŒæŽå²çãªçç±ã§ã€ã¡ãŒãžãã¿ã³ãé€ãïŒã§indexçªç®ã®èŠçŽ ãè¿ãã
æå®ããIDãŸãã¯nameïŒæŽå²çãªçç±ã§ã€ã¡ãŒãžãã¿ã³ãé€ãïŒããã€ãã©ãŒã ã§ãã©ãŒã ã³ã³ãããŒã«ïŒãŸãã¯è€æ°ååšããå Žåããã©ãŒã ã³ã³ãããŒã«ã®RadioNodeListïŒãè¿ãããŸãã¯ãããããååšããªãå ŽåãäžããããIDãšãšãã«imgèŠçŽ ãè¿ãã
äžåºŠèŠçŽ ãç¹å®ã®ååã䜿çšããŠåç
§ããããšãããšãèŠçŽ ã®å®éã®IDãŸãã¯nameã倿ŽããŠãèŠçŽ ãDocumentã«æ®ãéãããã®ååã¯ããã®æ¹æ³ã§ãã®èŠçŽ ãåç
§ããæ¹æ³ãšããŠå©çšããç¶ããã ããã
è€æ°ã®ãããããã¢ã€ãã ãååšããå Žåããããã®èŠçŽ ãã¹ãŠãå«ãRadioNodeListãªããžã§ã¯ããè¿ãããã
submit()ãã©ãŒã ãéä¿¡ããã
reset()ãã©ãŒã ããªã»ããããã
checkValidity()ãã©ãŒã ã®ã³ã³ãããŒã«ããã¹ãŠæå¹ã§ããå Žåã¯trueãè¿ããããã§ãªããã°falseãè¿ãã
The autocomplete IDL attribute must
reflect the content attribute of the same name, limited to only known
values.
The name IDL attribute must reflect
the content attribute of the same name.
The acceptCharset IDL attribute must
reflect the accept-charset content
attribute.
The elements IDL attribute must return an
HTMLFormControlsCollection rooted at the Document node while the
form element is in a Document and rooted at the
form element itself when it is not, whose filter matches listed elements whose form owner is the
form element, with the exception of input elements whose type attribute is in the Image
Button state, which must, for historical reasons, be excluded from this particular
collection.
The length IDL attribute must return the number
of nodes represented by the elements collection.
The supported property indices at any instant are the indices supported by the
object returned by the elements attribute at that
instant.
When a form element is indexed for indexed property
retrieval, the user agent must return the value returned by the item method on the elements collection, when invoked with the given index as its
argument.
Each form element has a mapping of names to elements called the past names
map. It is used to persist names of controls even when they change names.
The supported property names consist of the names obtained from the following algorithm, in the order obtained from this algorithm:
Let sourced names be an initially empty ordered list of tuples consisting of a string, an element, a source, where the source is either id, name, or past, and, if the source is past, an age.
For each listed element candidate
whose form owner is the form element, with the exception of any
input elements whose type attribute is in the
Image Button state, run these substeps:
If candidate has an id attribute, add
an entry to sourced names with that id
attribute's value as the string, candidate as the element, and id as
the source.
If candidate has a name attribute,
add an entry to sourced names with that name attribute's value as the string, candidate
as the element, and name as the source.
For each img element candidate whose form owner
is the form element, run these substeps:
If candidate has an id attribute, add
an entry to sourced names with that id
attribute's value as the string, candidate as the element, and id as
the source.
If candidate has a name attribute,
add an entry to sourced names with that name attribute's value as the string, candidate
as the element, and name as the source.
For each entry past entry in the past names map add an entry to sourced names with the past entry's name as the string, past entry's element as the element, past as the source, and the length of time past entry has been in the past names map as the age.
Sort sourced names by tree order of the element entry of each tuple, sorting entries with the same element by putting entries whose source is id first, then entries whose source is name, and finally entries whose source is past, and sorting entries with the same element and source by their age, oldest first.
Remove any entries in sourced names that have the empty string as their name.
Remove any entries in sourced names that have the same name as an earlier entry in the map.
Return the list of names from sourced names, maintaining their relative order.
The properties exposed in this way must not be enumerable.
When a form element is indexed for named property
retrieval, the user agent must run the following steps:
Let candidates be a live RadioNodeList
object containing all the listed elements whose form
owner is the form element that have either an id
attribute or a name attribute equal to name, with the exception of input elements whose type attribute is in the Image
Button state, in tree order.
If candidates is empty, let candidates be a
live RadioNodeList object containing all the img elements
that are descendants of the form element and that have either an id attribute or a name attribute equal
to name, in tree order.
If candidates is empty, name is the name of one of
the entries in the form element's past names map: return the object
associated with name in that map.
If candidates contains more than one node, return candidates and abort these steps.
Otherwise, candidates contains exactly one node. Add a mapping from
name to the node in candidates in the form
element's past names map, replacing the previous entry with the same name, if
any.
Return the node in candidates.
If an element listed in a form element's past names map changes
form owner, then its entries must be removed from that map.
The submit() method, when invoked, must submit the form element from the form
element itself, with the submitted from submit() method flag set.
The reset() method, when invoked, must run the
following steps:
If the form element is marked as locked for reset, then abort these
steps.
Mark the form element as locked for reset.
Unmark the form element as locked for reset.
If the checkValidity() method is
invoked, the user agent must statically validate the constraints of the
form element, and return true if the constraint validation return a positive
result, and false if it returned a negative result.
ãã®äŸã¯ã2ã€ã®æ€çŽ¢ãã©ãŒã ã瀺ãïŒ
<form action="http://www.google.com/search" method="get"> <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search..."> </form> <form action="http://www.bing.com/search" method="get"> <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search..."> </form>
labelèŠçŽ labelèŠçŽ ã§ãªããé€ããform - formèŠçŽ ãšã³ã³ãããŒã«ãé¢é£ä»ããfor - ãã©ãŒã ã³ã³ãããŒã«ãšã©ãã«ãé¢é£ä»ããinterface HTMLLabelElement : HTMLElement {
readonly attribute HTMLFormElement? form;
attribute DOMString htmlFor;
readonly attribute HTMLElement? control;
};
labelã¯ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã§ã®ãã£ãã·ã§ã³ã衚ããThe caption can be associated with a specific form control, known as the label element's labeled control, either using the for attribute, or by putting the form control inside the label element itself.
Except where otherwise specified by the following rules, a label element has no
labeled control.
for屿§ã¯ããã£ãã·ã§ã³ãé¢é£ä»ããããããšã«ãªã£ãŠãããã©ãŒã ã³ã³ãããŒã«ã瀺ãããã«æå®ãããŠãããããã®å±æ§ãæå®ãããå Žåã屿§å€ã¯ãlabelèŠçŽ ãšåãDocumentã§ã©ãã«ä»ãå¯èœèŠçŽ ã®IDã§ãªããã°ãªããªããIf the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable element, then that element is the label element's labeled control.
If the for attribute is not specified, but the
label element has a labelable element descendant,
then the first such descendant in tree order is the label element's
labeled control.
The label element's exact default presentation and behavior, in particular what
its activation behavior might be, if anything, should match the platform's label
behavior. The activation behavior of a label element for events targeted
at interactive content descendants of a label element, and any
descendants of those interactive content descendants, must be to do nothing.
For example, on platforms where clicking a checkbox label checks the checkbox, clicking the
label in the following snippet could trigger the user agent to run synthetic
click activation steps on the input element, as if the element itself had
been triggered by the user:
<label><input type=checkbox name=lost> Lost</label>
On other platforms, the behavior might be just to focus the control, or do nothing.
form屿§ã¯ããã©ãŒã ã®ææè
ãšlabelèŠçŽ ãæç€ºçã«é¢é£ä»ããããã«äœ¿çšãããã
次ã®äŸã¯ãã©ãã«ã䌎ã3ã€ã®ãã©ãŒã ã³ã³ãããŒã«ã§ããããã®ãã¡ã®2ã€ã䜿çšãããŠãŒã¶ãŒã«å¯ŸããŠé©åãªãã©ãŒãããã瀺ãå°ããªããã¹ããæã€ããšã瀺ãã
<p><label>Full name: <input name=fn> <small>Format: First Last</small></label></p> <p><label>Age: <input name=age type=number min=0></label></p> <p><label>Post code: <input name=pc> <small>Format: AB12 3CD</small></label></p>
controlãã®èŠçŽ ã«é¢é£ä»ãããããã©ãŒã ã³ã³ãããŒã«ãè¿ãã
The htmlFor IDL attribute must
reflect the for content attribute.
The control IDL attribute must return the
label element's labeled control, if any, or null if there isn't one.
The form IDL attribute is part of the element's forms
API.
labelsãã©ãŒã ã³ã³ãããŒã«ãé¢é£ä»ããããŠãããã¹ãŠã®labelèŠçŽ ã®NodeListãè¿ãã
Labelable elements have a NodeList object
associated with them that represents the list of label elements, in tree
order, whose labeled control is the element in question. The labels IDL attribute of labelable elements, on getting, must return that
NodeList object.
inputèŠçŽ type屿§ãHiddenç¶æ
ã§ãªãå ŽåïŒã€ã³ã¿ã©ã¯ãã£ãã³ã³ãã³ããtype屿§ãHiddenç¶æ
ã§ãªãå ŽåïŒèšèŒãã©ãã«ä»ãå¯èœãéä¿¡å¯èœãããã³ãªã»ããå¯èœãåé¢é£ä»ãå¯èœ ãã©ãŒã é¢é£èŠçŽ ãtype屿§ãHiddenç¶æ
ã§ããå ŽåïŒèšèŒãã©ãã«ä»ãå¯èœããªã»ããå¯èœãåé¢é£ä»ãå¯èœ ãã©ãŒã é¢é£èŠçŽ ãtype屿§ãHiddenç¶æ
ã§ãªãå ŽåïŒãã«ããã«ã³ã³ãã³ããaccept - ãã¡ã€ã«ã¢ããããŒãã³ã³ãããŒã«ã§äºæããããã¡ã€ã«ã¿ã€ãã«å¯Ÿãããã³ãalt - ç»åãå©çšäžå¯ã®é䜿çšãã眮æããã¹ãautocomplete - ãã©ãŒã ãªãŒããã£ã«æ©èœã«å¯Ÿãããã³ãautofocus - ããŒãžãèªã¿èŸŒãŸããéã«ãã©ãŒã ã³ã³ãããŒã«ã«èªåçã«ãã©ãŒã«ã¹ããchecked - ã³ãã³ããŸãã¯ã³ã³ãããŒã«ããã§ãã¯ãããŠãããã©ããdirname - ãã©ãŒã éä¿¡ã§ãèŠçŽ ã®æ¹åãéä¿¡ããããã«äœ¿çšãããã©ãŒã ãã£ãŒã«ãã®åådisabled - ãã©ãŒã ã³ã³ãããŒã«ãç¡å¹ã§ãããã©ããform - formèŠçŽ ãšã³ã³ãããŒã«ãé¢é£ä»ããformaction - ãã©ãŒã éä¿¡ã«äœ¿çšããURLformenctype - ãã©ãŒã éä¿¡ã«äœ¿çšããæåãšã³ã³ãŒãã£ã³ã°ãèšå®ãããã©ãŒã ããŒã¿formmethod - ãã©ãŒã éä¿¡ã«äœ¿çšããHTTPã¡ãœããformnovalidate - ãã©ãŒã éä¿¡ã®ããã®ãã©ãŒã ã³ã³ãããŒã«æ€èšŒãåé¿ããformtarget - ãã©ãŒã éä¿¡ã«å¯Ÿãããã©ãŠãžã³ã°ã³ã³ããã¹ãheight - çžŠã®æ¬¡å
inputmode - å
¥åã¢ããªãã£ãŒãéžæããããã®ãã³ãlist - ãªãŒãã³ã³ããªãŒããªãã·ã§ã³ã®ãªã¹ãmax - æå€§å€maxlength - å€ã®æå€§é·ãmin - æå°å€minlength - å€ã®æå°é·ãmultiple - è€æ°ã®å€ãèš±å¯ãããã©ããname - ãã©ãŒã éä¿¡ããã³form.elements APIã§äœ¿çšãããã©ãŒã ã³ã³ãããŒã«å pattern - ãã©ãŒã ã³ã³ãããŒã«ã®å€ã§ããããããã¿ãŒã³placeholder - ãã©ãŒã ã³ã³ãããŒã«å
ã«é
眮ããããŠãŒã¶ãŒå¯èŠã©ãã«readonly - ãŠãŒã¶ãŒã«ãã£ãŠç·šéãããå€ãèš±å¯ãããã©ããrequired - ã³ã³ãããŒã«ããã©ãŒã éä¿¡ã«èŠæ±ããããã©ããsize - ã³ã³ãããŒã«ã®ãµã€ãºsrc - ãªãœãŒã¹ã®ã¢ãã¬ã¹step - ãã©ãŒã ã³ã³ãããŒã«ã®å€ã§ãããããç²åºŠtype - ãã©ãŒã ã³ã³ãããŒã«ã®çš®é¡value - ãã©ãŒã ã³ã³ãããŒã«ã®å€width - æšªã®æ¬¡å
pattern屿§ãšçµã¿åãããŠäœ¿çšããå Žåãtitle屿§ã¯ãã®èŠçŽ ã§ç¹å¥ãªæå³ãæã€ãtype 屿§ã®ç¶æ
ã«äŸåãããaria-*屿§ãinterface HTMLInputElement : HTMLElement {
attribute DOMString accept;
attribute DOMString alt;
attribute DOMString autocomplete;
attribute boolean autofocus;
attribute boolean defaultChecked;
attribute boolean checked;
attribute DOMString dirName;
attribute boolean disabled;
readonly attribute HTMLFormElement? form;
readonly attribute FileList? files;
attribute DOMString formAction;
attribute DOMString formEnctype;
attribute DOMString formMethod;
attribute boolean formNoValidate;
attribute DOMString formTarget;
attribute unsigned long height;
attribute boolean indeterminate;
readonly attribute HTMLElement? list;
attribute DOMString max;
attribute long maxLength;
attribute DOMString min;
attribute long minLength;
attribute boolean multiple;
attribute DOMString name;
attribute DOMString pattern;
attribute DOMString placeholder;
attribute boolean readOnly;
attribute boolean required;
attribute unsigned long size;
attribute DOMString src;
attribute DOMString step;
attribute DOMString type;
attribute DOMString defaultValue;
[TreatNullAs=EmptyString] attribute DOMString value;
attribute Date? valueAsDate;
attribute unrestricted double valueAsNumber;
attribute unsigned long width;
void stepUp(optional long n = 1);
void stepDown(optional long n = 1);
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(DOMString error);
readonly attribute NodeList labels;
void select();
attribute unsigned long selectionStart;
attribute unsigned long selectionEnd;
attribute DOMString selectionDirection;
void setRangeText(DOMString replacement);
void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};
inputèŠçŽ ã¯ãéåžžããŠãŒã¶ãŒãããŒã¿ãç·šéã§ããããã«ããããã®ãã©ãŒã ã³ã³ãããŒã«ãšãåæå®ãããããŒã¿ãã£ãŒã«ãã衚ãã
type屿§ã¯ãèŠçŽ ã®ããŒã¿åïŒããã³é¢é£ããã³ã³ãããŒã«ïŒãå¶åŸ¡ããããã®å±æ§ã¯åæå±æ§ã§ãããæ¬¡ã®è¡šã¯ãããŒã¯ãŒããšå±æ§ã®ç¶æ
ã瀺ãã1åç®ã®ããŒã¯ãŒãã¯ãããŒã¯ãŒããšåãè¡ã§2åç®ã®ã»ã«å
ã®ç¶æ
ã«å¯Ÿå¿ã¥ããã
| ããŒã¯ãŒã | ç¶æ | ããŒã¿å | ã³ã³ãããŒã«å |
|---|---|---|---|
hidden
| é衚瀺 | ä»»æã®æåå | 該åœãªã |
text
| ããã¹ã | æ¹è¡ãªãã®ããã¹ã | ããã¹ããã£ãŒã«ã |
search
| Search | æ¹è¡ãªãã®ããã¹ã | æ€çŽ¢ãã£ãŒã«ã |
tel
| é»è©±çªå· | æ¹è¡ãªãã®ããã¹ã | ããã¹ããã£ãŒã«ã |
url
| URL | 絶察URL | ããã¹ããã£ãŒã«ã |
email
| é»åã¡ãŒã« | é»åã¡ãŒã«ã¢ãã¬ã¹ïŒã®ãªã¹ãïŒ | ããã¹ããã£ãŒã«ã |
password
| Password | æ¹è¡ãªãã®ããã¹ãïŒã»ã³ã·ãã£ããªæ å ±ïŒ | ããŒã¿ãšã³ããªãèŠãé ããããã¹ããã£ãŒã«ã |
date
| æ¥ä» | ã¿ã€ã ãŸãŒã³ã䌎ããªãæ¥ä»ïŒå¹Žãæãæ¥ïŒ | æ¥ä»ã®ã³ã³ãããŒã« |
time
| Time | ã¿ã€ã ãŸãŒã³ã䌎ããªãæå»ïŒæéãåãç§ãç§ã®å°æ°ïŒ | æå»ã®ã³ã³ãããŒã« |
number
| Number | æ°å€ | ããã¹ããã£ãŒã«ããŸãã¯ãã€ã€ã«ã®ã³ã³ãããŒã« |
range
| Range | æ£ç¢ºãªå€ãéèŠã§ã¯ãªã远å ã®ã»ãã³ãã£ãã¯ãæã€æ°å€ | ã¹ã©ã€ãã³ã³ãããŒã«ãŸãã¯é¡äŒŒã®ãã® |
color
| Color | 8ãããã®èµ€ãç·ãéè²ã³ã³ããŒãã³ãããã€RGBè² | è² |
checkbox
| Checkbox | å®çŸ©æžã¿ãªã¹ãããã®0å以äžã®å€ã®ã»ãã | ãã§ãã¯ããã¯ã¹ |
radio
| Radio Button | åæå€ | ã©ãžãªãã¿ã³ |
file
| File Upload | MIMEã¿ã€ãããã€0å以äžã®ãã¡ã€ã«ãšä»»æã§ãã¡ã€ã«å | ã©ãã«ãšãã¿ã³ |
submit
| Submit Button | éžæãããæåŸã®å€ã§ãªããã°ãªããããã©ãŒã ã®éä¿¡ãéå§ãã远å ã®ã»ãã³ãã£ãã¯ãæã€åæå€ | ãã¿ã³ |
image
| Image Button | éžæãããæåŸã®å€ã§ãªããã°ãªããããã©ãŒã ã®éä¿¡ãéå§ãã远å ã®ã»ãã³ãã£ãã¯ãæã€ãç¹å®ã®ç»åã®ãµã€ãºãåºæºãšããåº§æš | ã¯ãªãã¯å¯èœãªç»åããŸãã¯ãã¿ã³ã®ãããã |
reset
| Reset Button | 該åœãªã | ãã¿ã³ |
button
| Button | 該åœãªã | ãã¿ã³ |
æ¬ æå€ã®ããã©ã«ãã¯ãTextç¶æ ã§ããã
acceptãaltãautocompleteãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãlistãmaxãmaxlengthãminãminlengthãmultipleãpatternãplaceholderãreadonlyãrequiredãsizeãsrcãstepãwidthã³ã³ãã³ã屿§ãcheckedãfilesãvalueAsDateãvalueAsNumberãããã³listIDL屿§ãselect()ã¡ãœãããselectionStartãselectionEndãããã³selectionDirectionIDL屿§ãsetRangeText() and setSelectionRange()ã¡ãœãããstepUp() and stepDown()ã¡ãœãããinputããã³changeã€ãã³ããããã®type屿§ã®ç¶æ
ã«äŸåããinputèŠçŽ ã«é©çšãããåã¿ã€ããå®çŸ©ãããµãã»ã¯ã·ã§ã³ã¯ãŸããåã¿ã€ãã«ãããã®æ©èœãé©çšãããã®ãšé©çšããªããã®ããèŠç¯ç"ç°¿èš"ã»ã¯ã·ã§ã³ã§æçã«å®çŸ©ããããããã®æ©èœã®åäœã¯ããããæ§ã
ãªã»ã¯ã·ã§ã³ã§å®çŸ©ããããããããããé©çšãããã©ããã«äŸåãããïŒã³ã³ãã³ã屿§ãAPIãeventsãåç
§ïŒã
The following table is non-normative and summarizes which of those content attributes, IDL attributes, methods, and events apply to each state:
| é衚瀺 | Text, Search | URL, Telephone | é»åã¡ãŒã« | Password | Date, Time | Number | Range | Color | Checkbox, Radio Button | File Upload | Submit Button | Image Button | Reset Button, Button | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ã³ã³ãã³ã屿§ | ||||||||||||||
accept
| · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
alt
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
autocomplete
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · |
checked
| · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
dirname
| · | Yes | · | · | · | · | · | · | · | · | · | · | · | · |
formaction
| · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formenctype
| · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formmethod
| · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formnovalidate
| · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formtarget
| · | · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
height
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
inputmode
| · | Yes | · | · | Yes | · | · | · | · | · | · | · | · | · |
list
| · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
max
| · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
maxlength
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
min
| · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
minlength
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
multiple
| · | · | · | Yes | · | · | · | · | · | · | Yes | · | · | · |
pattern
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
placeholder
| · | Yes | Yes | Yes | Yes | · | Yes | · | · | · | · | · | · | · |
readonly
| · | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · |
required
| · | Yes | Yes | Yes | Yes | Yes | Yes | · | · | Yes | Yes | · | · | · |
size
| · | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
src
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
step
| · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
width
| · | · | · | · | · | · | · | · | · | · | · | · | Yes | · |
| IDL屿§ãšã¡ãœãã | ||||||||||||||
checked
| · | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
files
| · | · | · | · | · | · | · | · | · | · | Yes | · | · | · |
value
| default | value | value | value | value | value | value | value | value | default/on | filename | default | default | default |
valueAsDate
| · | · | · | · | · | Yes | · | · | · | · | · | · | · | · |
valueAsNumber
| · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
list
| · | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
select()
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
selectionStart
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
selectionEnd
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
selectionDirection
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
setRangeText()
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
setSelectionRange()
| · | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
stepDown()
| · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
stepUp()
| · | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
| ã€ãã³ã | ||||||||||||||
input event
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
change event
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
Some states of the type attribute define a value
sanitization algorithm.
Each input element has a value, which is
exposed by the value IDL attribute. Some states define an
algorithm to convert a string to a number, an
algorithm to convert a number to a string, an
algorithm to convert a string to a Date
object, and an algorithm to convert a
Date object to a string, which are used by max, min, step, valueAsDate, valueAsNumber, stepDown(), and stepUp().
Each input element has a boolean dirty
value flag. The dirty value flag must be
initially set to false when the element is created, and must be set to true whenever the user
interacts with the control in a way that changes the value.
(It is also set to true when the value is programmatically changed, as described in the definition
of the value IDL attribute.)
valueã³ã³ãã³ã屿§ã¯inputèŠçŽ ã®ããã©ã«ãã®å€ã瀺ããWhen the value content attribute is added, set, or removed, if the control's dirty value flag is false, the user agent must set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then run the current value sanitization algorithm, if one is defined.
Each input element has a checkedness,
which is exposed by the checked IDL attribute.
Each input element has a boolean dirty checkedness flag. When it is true, the
element is said to have a dirty checkedness.
The dirty checkedness flag must be initially
set to false when the element is created, and must be set to true whenever the user interacts with
the control in a way that changes the checkedness.
checkedã³ã³ãã³ã屿§ã¯ãinputèŠçŽ ã®ããã©ã«ãã®checkednessãäžããçåœå±æ§ã§ãããWhen the checked content attribute is added, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to true; when the checked content attribute is removed, if the control does not have dirty checkedness, the user agent must set the checkedness of the element to false.
The reset algorithm for input
elements is to set the dirty value flag and
dirty checkedness flag back to false, set
the value of the element to the value of the value content attribute, if there is one, or the empty string
otherwise, set the checkedness of the element to true if
the element has a checked content attribute and false if
it does not, empty the list of selected
files, and then invoke the value sanitization algorithm, if the type attribute's current state defines one.
Each input element can be mutable. Except where
otherwise specified, an input element is always mutable. Similarly, except where otherwise specified, the user
agent should not allow the user to modify the element's value or checkedness.
When an input element is disabled, it is not mutable.
The readonly attribute can also in some
cases (e.g. for the Date state, but not the Checkbox state) stop an input element from
being mutable.
The cloning steps for input elements
must propagate the value, dirty value flag, checkedness, and dirty checkedness flag from the node being cloned
to the copy.
When an input element is first created, the element's rendering and behavior must
be set to the rendering and behavior defined for the type
attribute's state, and the value sanitization algorithm, if one is defined for the
type attribute's state, must be invoked.
When an input element's type attribute
changes state, the user agent must run the following steps:
If the previous state of the element's type attribute
put the value IDL attribute in the value mode, and the element's value is not the empty string, and the new state of the element's
type attribute puts the value IDL attribute in either the default mode or the default/on mode, then set the element's value content attribute to the element's value.
Otherwise, if the previous state of the element's type attribute put the value
IDL attribute in any mode other than the value mode, and the
new state of the element's type attribute puts the value IDL attribute in the value mode, then set the value of the element to the value of the value content attribute, if there is one, or the empty string
otherwise, and then set the control's dirty value
flag to false.
Update the element's rendering and behavior to the new state's.
Invoke the value sanitization algorithm, if one is defined for the type attribute's new state.
name屿§ã¯èŠçŽ ã®ååã衚ããdirname屿§ã¯ãèŠçŽ ã®æ¹åãã©ã®ããã«éä¿¡ãããããå¶åŸ¡ãããdisabled屿§ã¯ãã³ã³ãããŒã«ãéã€ã³ã¿ã©ã¯ãã£ãã«ããããããã³ãã®å€ãéä¿¡ããã®ãé²ãããã«äœ¿çšããããform屿§ã¯ããã©ãŒã ã®ææè
ãšinputèŠçŽ ãæç€ºçã«é¢é£ä»ããããã«äœ¿çšããããautofocus屿§ã¯ãã©ãŒã«ã¹ãå¶åŸ¡ãããautocomplete屿§ã¯ãã©ã®ããã«ãŠãŒã¶ãŒãšãŒãžã§ã³ãããªãŒããã£ã«ã®æ¯ãèããæäŸããããå¶åŸ¡ããã
The indeterminate IDL attribute must
initially be set to false. On getting, it must return the last value it was set to. On setting, it
must be set to the new value. It has no effect except for changing the appearance of checkbox controls.
The accept, alt, max,
min, multiple, pattern, placeholder, required, size, src,
and step IDL attributes must reflect
the respective content attributes of the same name. The dirName IDL attribute must reflect the
dirname content attribute. The readOnly IDL attribute must reflect the
readonly content attribute. The defaultChecked IDL attribute must
reflect the checked content attribute. The
defaultValue IDL attribute must
reflect the value content attribute.
The type IDL attribute must reflect
the respective content attribute of the same name, limited to only known values.
The maxLength IDL attribute must reflect
the maxlength content attribute, limited to only
non-negative numbers. The minLength IDL attribute must reflect
the minlength content attribute, limited to only
non-negative numbers.
The IDL attributes width and height must return the rendered width and height of
the image, in CSS pixels, if an image is being rendered, and is being rendered to a
visual medium; or else the intrinsic width and height of the image, in CSS pixels, if an image is
available but not being rendered to a visual medium; or else 0,
if no image is available. When the input element's
type attribute is not in the Image Button state, then no image is available. [CSS]
On setting, they must act as if they reflected the respective content attributes of the same name.
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), and setCustomValidity() methods, are part of the constraint validation API. labelsIDL屿§ã¯ã èŠçŽ ã®labelã®ãªã¹ããæäŸãããThe select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), and setSelectionRange() methods and IDL attributes expose the element's text selection. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.
type 屿§ã®ç¶æ
type=hiddenïŒinputèŠçŽ ã¯ãæ€æ»ãããããšãæå³ããããŸããŠãŒã¶ãŒã«ãã£ãŠæäœãããªãå€ã衚ãã
Constraint validation: If an input element's type attribute is in the Hidden state, it is barred from constraint
validation.
name屿§ãååšãããã€æåå"_charset_"ã«å€§æåã»å°æååºå¥ã§äžèŽããå€ãæã€å Žåããã®èŠçŽ ã®value屿§ãçç¥ããªããã°ãªããªãã
valueIDL屿§ã¯ããã®èŠçŽ ã«é©çšãããã¢ãŒãã®ããã©ã«ããšãªãã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãautocompleteãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãlistãmaxãmaxlengthãminãminlengthãmultipleãpatternãplaceholderãreadonlyãrequiredãsizeãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãlistãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumber IDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
inputããã³changeã€ãã³ãã¯é©çšããªãã
type=textïŒç¶æ
ãšSearchç¶æ
ïŒtype=searchïŒtextboxïŒããã©ã«ã - èšå®ããªãïŒãŸãã¯comboboxãaria-*屿§ãWhen an input element's type attribute is in
the Text state or the Search state, the rules in this section apply.
inputèŠçŽ ã¯ãèŠçŽ ã®å€ã«å¯Ÿãã1è¡ã®ãã¬ãŒã³ããã¹ãç·šéã³ã³ãããŒã«ã衚ãã
SearchTextç¶æ ããã³ç¶æ ãšã®éãã¯ãäž»ã«æäœã§ããïŒæ€çŽ¢ãã£ãŒã«ããéåžžã®ããã¹ããã£ãŒã«ããšã¯åºå¥ããããã©ãããã©ãŒã ã«ãããŠãSearchç¶æ ã¯ãéåžžã®ããã¹ããã£ãŒã«ãã®ããã«è¡šç€ºããããããããã©ãããã©ãŒã ã®æ€çŽ¢ãã£ãŒã«ããæã€äžè²«ããå€èгã«ãªããããããªãã
If the element is mutable, its value should be editable by the user. User agents must not allow users to insert "LF" (U+000A) or "CR" (U+000D) characters into the element's value.
If the element is mutable, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:
Set the element's dir attribute to "ltr" if the user selected a left-to-right writing direction, and
"rtl" if the user selected a right-to-left writing
direction.
Queue a task to fire a simple event that bubbles named input at the input element.
æå®ãããå Žåãvalue屿§ã¯ã"LF"ïŒU+000AïŒãŸãã¯"CR"ïŒU+000DïŒæåãå«ãŸãªãå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: Strip line breaks from the value.
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒautocompleteãdirnameãinputmodeãlistãmaxlengthãminlengthãpatternãplaceholderãreadonlyãrequiredãsizeã³ã³ãã³ã屿§ãlistãselectionStartãselectionEndãselectionDirectionãvalueIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ã¡ãœããã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãmaxãminãmultipleãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãvalueAsDateãvalueAsNumberIDL屿§ãstepDown()ãstepUp()ã¡ãœããã
type=telïŒtextboxïŒããã©ã«ã - èšå®ããªãïŒãŸãã¯comboboxãaria-*屿§ãinputèŠçŽ ã¯ããã®èŠçŽ ã®å€ã§äžããããé»è©±çªå·ã®ç·šéã«å¯Ÿããã³ã³ãããŒã«ã衚ãã
If the element is mutable, its value should be editable by the user. User agents may change the spacing and, with care, the punctuation of values that the user enters. User agents must not allow users to insert "LF" (U+000A) or "CR" (U+000D) characters into the element's value.
æå®ãããå Žåãvalue屿§ã¯ã"LF"ïŒU+000AïŒãŸãã¯"CR"ïŒU+000DïŒæåãå«ãŸãªãå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: Strip line breaks from the value.
URLãE-mailåãšã¯ç°ãªããTelephoneåã¯ç¹å®ã®æ§æã匷å¶ããªããããã¯æå³çãªãã®ã§ããã劥åœã§ããé»è©±çªå·ã¯å€çš®å€æ§ã«ããã£ãŠååšããã®ã§ãå®éã«ãé»è©±çªå·ãã£ãŒã«ãã¯èªç±åœ¢åŒã®ãã£ãŒã«ãã«ãªãåŸåããããç¹å®ã®åœ¢åŒãé©çšããå¿
èŠã®ããã·ã¹ãã ã¯ãã¯ã©ã€ã¢ã³ãåŽã®æ€èšŒæ©æ§ã«æ¥ç¶ããããã«pattern屿§ãŸãã¯setCustomValidity()ã¡ãœããã䜿çšããããæšå¥šãããã
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒautocompleteãlistãmaxlengthãminlengthãpatternãplaceholderãreadonlyãrequiredãsizeã³ã³ãã³ã屿§ãlistãselectionStartãselectionEndãselectionDirectionãvalueIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ã¡ãœããã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãmaxãminãmultipleãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãvalueAsDateãvalueAsNumberIDL屿§ãstepDown()ãstepUp()ã¡ãœããã
type=urlïŒtextboxïŒããã©ã«ã - èšå®ããªãïŒãŸãã¯comboboxãaria-*屿§ãinputèŠçŽ ã¯ãèŠçŽ ã®å€ã§æå®ãããåäžã®çµ¶å¯ŸURLãç·šéããããã®ã³ã³ãããŒã«ã衚ãã
If the element is mutable, the user agent should allow the user to change the URL represented by its value. User agents may allow the user to set the value to a string that is not a valid absolute URL, but may also or instead automatically escape characters entered by the user so that the value is always a valid absolute URL (even if that isn't the actual value seen and edited by the user in the interface). User agents should allow the user to set the value to the empty string. User agents must not allow users to insert "LF" (U+000A) or "CR" (U+000D) characters into the value.
æå®ãããã€ç©ºã§ãªãå Žåãvalue屿§ã¯ã絶察URLã§ããæœåšçã«ã¹ããŒã¹ã§å²ãŸãã劥åœãªURLã§ããå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: Strip line breaks from the value, then strip leading and trailing whitespace from the value.
Constraint validation: While the value of the element is neither the empty string nor a valid absolute URL, the element is suffering from a type mismatch.
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒautocompleteãlistãmaxlengthãminlengthãpatternãplaceholderãreadonlyãrequiredãsizeã³ã³ãã³ã屿§ãlistãselectionStartãselectionEndãselectionDirectionãvalueIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ã¡ãœããã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãmaxãminãmultipleãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãvalueAsDateãvalueAsNumberIDL屿§ãstepDown()ãstepUp()ã¡ãœããã
ææžã以äžã®ããŒã¯ã¢ãããå«ãã§ããå ŽåïŒ
<input type="url" name="location" list="urls"> <datalist id="urls"> <option label="MIME: Format of Internet Message Bodies" value="http://tools.ietf.org/html/rfc2045"> <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/"> <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint"> <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/"> <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html"> <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/"> </datalist>
ãããŠãŠãŒã¶ãŒã"www.w3"ãšå
¥åãããŠãŒã¶ãŒãšãŒãžã§ã³ããæè¿ãŠãŒã¶ãŒãhttp://www.w3.org/Consortium/#membershipããã³http://www.w3.org/TR/XForms/ã蚪ããããšãèªããããå Žåãã¬ã³ããªã³ã°ã¯ãã®ããã«èŠããã ããïŒ

ãã®ãµã³ãã«ã«ãããŠæåã®4ã€ã®URLã¯ãïŒããããããŠãŒã¶ãŒããããã®URLãåç §ããé »åºŠã«ããïŒãŠãŒã¶ãŒãšãŒãžã§ã³ãå®çŸ©ã®æ¹æ³ã§ãœãŒããããããŠãŒã¶ãŒãå ¥åããããã¹ããšäžèŽããèè ãæå®ãããªã¹ãå ã®4ã€ã®URLã§æ§æãããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãŠãŒã¶ãŒãã¹ããŒã ã®éšåãçç¥ããŠããã¡ã€ã³åäžã®ã€ã³ããªãžã§ã³ããããã³ã°ãå®è¡ã§ããããã«ããããã«ãå€ãURLã§ãããšããæ å ±ãã©ã®ããã«äœ¿ã£ãŠãããã«æ³šæããã
æåŸã®2ã€ã®URLïŒãŸããå©çšå¯èœã§ããããå€ãã®å€ã®ã¹ã¯ããŒã«ããŒã®å¹èœãèãããšãããããå€ãã®URLïŒã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ãã®ã»ãã·ã§ã³å±¥æŽããŒã¿ãããµãããããã®ã§ããããã®ããŒã¿ã¯ãããŒãžã®DOMã§å©çšã§ããªãããã®ç¹æ®ãªäŸã«ãããŠããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãã®å€ãæäŸããããã®ã¿ã€ãã«ãæããªãã
type=emailïŒtextboxïŒããã©ã«ã - èšå®ããªãïŒãŸãã¯comboboxãaria-*屿§ãE-mailç¶æ
ãã©ã®ããã«åäœãããã¯ãmultiple屿§ãæå®ããããã©ããã«äŸåããã
multiple屿§ãèŠçŽ ã«æå®ãããŠããªãå ŽåinputèŠçŽ ã¯ããã®èŠçŽ ã®å€valueã§æå®ãããé»åã¡ãŒã«ã¢ãã¬ã¹ãç·šéããããã®ã³ã³ãããŒã«ã衚ãã
If the element is mutable, the user agent should allow the user to change the e-mail address represented by its value. User agents may allow the user to set the value to a string that is not a valid e-mail address. The user agent should act in a manner consistent with expecting the user to provide a single e-mail address. User agents should allow the user to set the value to the empty string. User agents must not allow users to insert "LF" (U+000A) or "CR" (U+000D) characters into the value. User agents may transform the value for display and editing; in particular, user agents should convert punycode in the value to IDN in the display and vice versa.
Constraint validation: While the user interface is representing input that the user agent cannot convert to punycode, the control is suffering from bad input.
æå®ãããŠãã€ç©ºã§ãªãå Žåãvalue屿§ã¯ãåäžã®åŠ¥åœãªé»åã¡ãŒã«ã¢ãã¬ã¹ã§ããå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: Strip line breaks from the value, then strip leading and trailing whitespace from the value.
When the multiple attribute is removed, the user
agent must run the value sanitization algorithm.
Constraint validation: While the value of the element is neither the empty string nor a single valid e-mail address, the element is suffering from a type mismatch.
multiple屿§ãèŠçŽ ã«æå®ãããŠããå ŽåThe element's values are the result of splitting on commas the element's value.
inputèŠçŽ ã¯ãèŠçŽ ã®å€ã§äžããããé»åã¡ãŒã«ã¢ãã¬ã¹ã远å ãåé€ãããã³ç·šéããã«å¯Ÿããã³ã³ãããŒã«ã衚ãã
If the element is mutable, the user agent should allow the user to add, remove, and edit the e-mail addresses represented by its values. User agents may allow the user to set any individual value in the list of values to a string that is not a valid e-mail address, but must not allow users to set any individual value to a string containing "," (U+002C), "LF" (U+000A), or "CR" (U+000D) characters. User agents should allow the user to remove all the addresses in the element's values. User agents may transform the values for display and editing; in particular, user agents should convert punycode in the value to IDN in the display and vice versa.
Constraint validation: While the user interface describes a situation where an individual value contains a "," (U+002C) or is representing input that the user agent cannot convert to punycode, the control is suffering from bad input.
Whenever the user changes the element's values, the user agent must run the following steps:
Let latest values be a copy of the element's values.
Strip leading and trailing whitespace from each value in latest values.
Let the element's value be the result of concatenating all the values in latest values, separating each value from the next by a single "," (U+002C) character, maintaining the list's order.
value屿§ãæå®ãããå Žåã劥åœãªé»åã¡ãŒã«ã¢ãã¬ã¹ã®ãªã¹ãã§ããå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows:
Split on commas the element's value, strip leading and trailing whitespace from each resulting token, if any, and let the element's values be the (possibly empty) resulting list of (possibly empty) tokens, maintaining the original order.
Let the element's value be the result of concatenating the element's values, separating each value from the next by a single "," (U+002C) character, maintaining the list's order.
When the multiple attribute is set, the user agent
must run the value sanitization algorithm.
Constraint validation: While the value of the element is not a valid e-mail address list, the element is suffering from a type mismatch.
劥åœãªé»åã¡ãŒã«ã¢ãã¬ã¹ã¯ãUnicodeæåã»ãããšä»¥äžã®ABNFã®emailçæç©ã«ãããããæååã§ããããã®ABNFã¯ãRFC 1123ã§èª¬æãããæ¡åŒµãå®è£
ããã[ABNF] [RFC5322] [RFC1034] [RFC1123]
email = 1*( atext / "." ) "@" label *( "." label ) label = let-dig [ [ ldh-str ] let-dig ] ; RFC 1034 3.5ç¯ã«ãã£ãŠ63æåã®é·ãã«å¶éããã atext = < RFC 5322 3.2.3ç¯ã§å®çŸ©ããããšãã > let-dig = < RFC 1034 3.5ç¯ã§å®çŸ©ããããšãã > ldh-str = < RFC 1034 3.5ç¯ã§å®çŸ©ããããšãã >
ãã®èŠæ±äºé ã¯ããã®æ¡ä»¶ã§å®éã«äœ¿çšããã«ã¯ãããŸãã«ã峿 Œã§ããïŒ"@"æåã®åïŒãšåæã«ãããŸãã«ãææ§ïŒ"@"æåã®åŸïŒã§ããããã€ããŸãã«ãç·©æ ¢ãªïŒã³ã¡ã³ããç©ºçœæåãã»ãšãã©ã®ãŠãŒã¶ãŒã«ã¯ãªãã¿ã®ãªãæ¹æ³ã§ããåŒçšç¬Šã蚱容ããïŒé»åã¡ãŒã«ã¢ãã¬ã¹ã®æ§æãå®çŸ©ãããRFC5322ã®æ æã®éåã§ããã
以äžã®JavaScriptãšPerläºæã®æ£èŠè¡šçŸã¯ãäžèšã®å®çŸ©ãå®è£ ãããã®ã§ããã
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
ããã§ãåããŒã¯ã³ã¯ã劥åœãªé»åã¡ãŒã«ã¢ãã¬ã¹ãã®ãã®ã§ããã劥åœãªé»åã¡ãŒã«ã¢ãã¬ã¹ã®ãªã¹ãã¯ãã³ã³ãåºåãã®ããŒã¯ã³ã®ã»ããã§ãããTo obtain the list of tokens from a valid e-mail address list, and implementation must split the string on commas.
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒautocompleteãlistãmaxlengthãminlengthãmultipleãpatternãplaceholderãreadonlyãrequiredãsizeã³ã³ãã³ã屿§ãlistãvalueIDL屿§ã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãmaxãminãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumberIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
type=passwordïŒtextbox ïŒããã©ã«ã - èšå®ããªãïŒãaria-*屿§ãinputèŠçŽ ã¯ãèŠçŽ ã®å€ã«å¯Ÿãã1è¡ã®ãã¬ãŒã³ããã¹ãç·šéã³ã³ãããŒã«ã衚ãããŠãŒã¶ãŒä»¥å€ãå€ãèŠãããšãã§ããªãããã«ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯å€ãèŠããªããã¹ãã§ããã
If the element is mutable, its value should be editable by the user. User agents must not allow users to insert "LF" (U+000A) or "CR" (U+000D) characters into the value.
æå®ãããå Žåãvalue屿§ã¯ã"LF"ïŒU+000AïŒãŸãã¯"CR"ïŒU+000DïŒæåãå«ãŸãªãå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: Strip line breaks from the value.
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒautocompleteãmaxlengthãminlengthãpatternãplaceholderãreadonlyãrequiredãsizeã³ã³ãã³ã屿§ãselectionStartãselectionEndãselectionDirectionãvalueIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ã¡ãœããã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãlistãmaxãminãmultipleãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãlistãvalueAsDateãvalueAsNumberIDL屿§ãstepDown()ãstepUp()ã¡ãœããã
type=dateïŒinputèŠçŽ ã¯ãç¹å®ã®æ¥ä»ã衚ããèŠçŽ ã®å€ãèšå®ããæååã«å¯Ÿããã³ã³ãããŒã«ã衚ãã
If the element is mutable, the user agent should allow the user to change the date represented by its value, as obtained by parsing a date from it. User agents must not allow the user to set the value to a non-empty string that is not a valid date string. If the user agent provides a user interface for selecting a date, then the value must be set to a valid date string representing the user's selection. User agents should allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid date string, the control is suffering from bad input.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
æå®ãããŠãã€ç©ºã§ãªãå Žåãvalue屿§ã¯ã劥åœãªæ¥ä»æååã§ããå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
min屿§ãæå®ãããå Žåã劥åœãªæ¥ä»æååãšãªãå€ãæããªããã°ãªããªããmax屿§ãæå®ãããå Žåã劥åœãªæ¥ä»æååãšãªãå€ãæããªããã°ãªããªãã
step屿§ã¯æ¥åäœã§è¡šããããThe step scale factor is 86,400,000 (which converts the days to milliseconds, as used in the other algorithms). The default step is 1 day.
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest date for which the element would not suffer from a step mismatch.
The algorithm to convert a string to a
number, given a string input, is as follows: If parsing a date from input results in an
error, then return an error; otherwise, return the number of milliseconds elapsed from midnight
UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z") to midnight UTC on the morning of the parsed date, ignoring leap seconds.
The algorithm to convert a number to a
string, given a number input, is as follows: Return a
valid date string that represents the date that, in
UTC, is current input milliseconds after midnight UTC on the morning of
1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z").
The algorithm to convert a string to a
Date object, given a string input, is as follows:
If parsing a date from input results
in an error, then return an error; otherwise, return a new
Date object representing midnight UTC on the morning of the parsed date.
The algorithm to convert a
Date object to a string, given a Date object input, is as follows: Return a valid date string that
represents the date current at the time represented by input in the UTC time zone.
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒautocompleteãlistãmaxãminãreadonlyãrequiredãããã³stepã³ã³ãã³ã屿§ãlistãvalueãvalueAsDateãããã³valueAsNumberIDL屿§ãstepDown()ããã³stepUp()ã¡ãœããã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãmaxlengthãminlengthãmultipleãpatternãplaceholderãsizeãsrcãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãselectionStartãselectionEndãselectionDirectionIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ã¡ãœããã
type=timeïŒinputèŠçŽ ã¯ãç¹å®ã®æå»ã衚ããèŠçŽ ã®å€ãèšå®ããæååã«å¯Ÿããã³ã³ãããŒã«ã衚ãã
If the element is mutable, the user agent should allow the user to change the time represented by its value, as obtained by parsing a time from it. User agents must not allow the user to set the value to a non-empty string that is not a valid time string. If the user agent provides a user interface for selecting a time, then the value must be set to a valid time string representing the user's selection. User agents should allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid time string, the control is suffering from bad input.
See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls.
æå®ãããŠãã€ç©ºã§ãªãå Žåãvalue屿§ã¯ã劥åœãªæå»æååã§ããå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: If the value of the element is not a valid time string, then set it to the empty string instead.
The form control has a periodic domain.
min屿§ãæå®ãããå Žåã劥åœãªæå»æååãšãªãå€ãæããªããã°ãªããªããmax屿§ãæå®ãããå Žåã劥åœãªæå»æååãšãªãå€ãæããªããã°ãªããªãã
step屿§ã¯ç§åäœã§è¡šããããThe step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). The default step is 60 seconds.
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest time for which the element would not suffer from a step mismatch.
The algorithm to convert a string to a number, given a string input, is as follows: If parsing a time from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight to the parsed time on a day with no time changes.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid time string that represents the time that is input milliseconds after midnight on a day with no time changes.
The algorithm to convert a string to a
Date object, given a string input, is as follows:
If parsing a time from input results
in an error, then return an error; otherwise, return a new
Date object representing the parsed time in
UTC on 1970-01-01.
The algorithm to convert a
Date object to a string, given a Date object input, is as follows: Return a valid time string that
represents the UTC time component that is represented by input.
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒautocompleteãlistãmaxãminãreadonlyãrequiredãããã³stepã³ã³ãã³ã屿§ãlistãvalueãvalueAsDateãããã³valueAsNumberIDL屿§ãstepDown()ããã³stepUp()ã¡ãœããã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãmaxlengthãminlengthãmultipleãpatternãplaceholderãsizeãsrcãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãselectionStartãselectionEndãselectionDirectionIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ã¡ãœããã
type=numberïŒspinbutton ïŒããã©ã«ã - èšå®ããªãïŒãaria-*屿§ãinputèŠçŽ ã¯ãæ°å€ã衚ãæååã«èŠçŽ ã®å€ãèšå®ããæååã«å¯Ÿããã³ã³ãããŒã«ã衚ãã
If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating-point number values to it. User agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number. If the user agent provides a user interface for selecting a number, then the value must be set to the best representation of the number representing the user's selection as a floating-point number. User agents should allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid floating-point number, the control is suffering from bad input.
ãã®ä»æ§ã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ããã©ã®ãããªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã䜿çšããããå®çŸ©ããªãããŠãŒã¶ãŒãšãŒãžã§ã³ãã®ãã³ããŒã¯ãæè¯ã®ãã®ããŠãŒã¶ãŒã®ããŒãºã«æäŸããããèæ ®ããããšãæšå¥šããããããšãã°ããã«ã·ã£èªãã¢ã©ãã¢èªååã«ãããŠãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããã«ã·ã£èªãšã¢ã©ãã¢èªã®æ°åå ¥åïŒäžèšã®ããã«éä¿¡ããããã«å¿ èŠãªåœ¢åŒã«å€æïŒããµããŒãããã ãããåæ§ã«ãããŒã人ã«èšèšããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå°æ°ããããããããŒãæ°åã®å€ã衚瀺ããããšãããããŸãã¯ïŒããçŸå®çã«ïŒãã©ã³ã¹åžå Žåãã«èšèšããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯1000ãšå°æ°ã®åã®ã³ã³ããšã®éã«ã¢ãã¹ãããã£ã§å€ã衚瀺ããããšããããå éšçã«äžèšã®é信圢åŒã«å€æããŠããã®æ¹æ³ã§å€ãå ¥åã§ããã
æå®ãããŠãã€ç©ºã§ãªãå Žåãvalue屿§ã¯ã劥åœãªæµ®åå°æ°ç¹æ°ã§ããå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.
min屿§ãæå®ãããå Žåã劥åœãªæµ®åå°æ°ç¹æ°ãšãªãå€ãæããªããã°ãªããªããmax屿§ãæå®ãããå Žåã劥åœãªæµ®åå°æ°ç¹æ°ãšãªãå€ãæããªããã°ãªããªãã
The step scale factor is 1. The default step is 1 (allowing only integers to be selected by the user, unless the step base has a non-integer value).
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest number for which the element would not suffer from a step mismatch. If there are two such numbers, user agents are encouraged to pick the one nearest positive infinity.
The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating-point number values to input results in an error, then return an error; otherwise, return the resulting number.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating-point number that represents input.
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒautocompleteãlistãmaxãminãplaceholderãreadonlyãrequiredããã³stepã³ã³ãã³ã屿§ãlistãvalueããã³valueAsNumberIDL屿§ãstepDown()ããã³stepUp()ã¡ãœããã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãmaxlengthãminlengthãmultipleãpatternãsizeãsrcãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãselectionStartãselectionEndãselectionDirectionãvalueAsDateIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ã¡ãœããã
ããã¯æ°å€å ¥åå¶åŸ¡ã䜿çšããäŸã§ããïŒ
<label>How much do you want to charge? $<input type=number min=0 step=0.01 name=price></label>
äžè¿°ããããã«ããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãéä¿¡ããããã«å¿ èŠãªãã©ãŒãããã«å€æãããŠãŒã¶ãŒã®ããŒã«ã«ãã©ãŒãããã®æ°å€å ¥åããµããŒããããããããªããããã¯ãã°ã«ãŒãååºåãæåïŒ"872,000,000,000"ã®ããã«ïŒã®åŠçãšãæ§ã ãªæ¡åºåãèšå·ïŒããšãã°"3,99"ãš"3.99"ïŒãŸãã¯ãã®åå°ã®æ°åïŒããšãã°ã¢ã©ãã¢èªããã³ãã£ãŒèªããã«ã·ã£èªãã¿ã€èªã®ãã®ãªã©ïŒã®äœ¿çšãå«ããããããªãã
type=numberç¶æ
ã¯ãæ°åã®ã¿ã§æ§æãããããã«åºçŸããããå³å¯ã«çªå·ãäŒããªãå
¥åã«é©ããªããããšãã°ãã¯ã¬ãžããã«ãŒãçªå·ãç±³åœã®éµäŸ¿çªå·ã«ã¯äžé©åã ãããtype=number決å®ããç°¡åãªæ¹æ³ã¯ãïŒããšãã°"up"ãš"down"ã®ç¢å°ããã€ïŒã¹ãã³ããã¯ã¹ã€ã³ã¿ãŒãã§ãŒã¹ãæã€å
¥åå¶åŸ¡ãçãéããã©ãããæ€èšããããšã§ãããæåŸã®æ¡ã§1ã€ééã£ãã¯ã¬ãžããã«ãŒãçªå·ã®ååŸã¯å°ããªãã¹ã§ã¯ãªãããã¹ãŠã®æ¡ãééã£ãŠååŸããããšãšåãã§ããããã£ãŠããŠãŒã¶ãŒã"up"ãš"down"ãã¿ã³ã䜿çšããŠã¯ã¬ãžããã«ãŒãçªå·ãéžæããããšã¯çãéããªãã ãããã¹ãã³ããã¯ã¹ã€ã³ã¿ãŒãã§ãŒã¹ãé©åã§ãªãå Žåãtype=textã¯ããããæ£ããéžæã§ããïŒããããpattern屿§ãæã€ïŒã
type=rangeïŒslider ïŒããã©ã«ã - èšå®ããªãïŒãaria-*屿§ãinputèŠçŽ ã¯ãæ°å€ã衚ãæååã«èŠçŽ ã®å€ãèšå®ããããã®ã³ã³ãããŒã«ã衚ãããæ£ç¢ºãªå€ãéèŠã§ã¯ãªããšããéç¥ãšãšãã«ãNumberç¶æ
ãæäŸãããããåçŽãªã€ã³ã¿ãŒãã§ãŒã¹ããŠãŒã¶ãŒãšãŒãžã§ã³ãã«æäŸãããã
ãã®ç¶æ ã«ãããŠãç¯å²ããã³ã¹ãããå¶çŽã¯ããŠãŒã¶ãŒå ¥åã®éã§ããã匷å¶ããããããŠå€ã空æååã«èšå®ããæ¹æ³ã¯ååšããªãã
If the element is mutable, the user agent should allow the user to change the number represented by its value, as obtained from applying the rules for parsing floating-point number values to it. User agents must not allow the user to set the value to a string that is not a valid floating-point number. If the user agent provides a user interface for selecting a number, then the value must be set to a best representation of the number representing the user's selection as a floating-point number. User agents must not allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid floating-point number, the control is suffering from bad input.
value屿§ãæå®ãããå Žåã劥åœãªæµ®åå°æ°ç¹æ°ãšãªãå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to a valid floating-point number that represents the default value.
min屿§ãæå®ãããå Žåã劥åœãªæµ®åå°æ°ç¹æ°ãšãªãå€ãæããªããã°ãªããªããããã©ã«ãã®æå°ã¯0ã§ãããmax屿§ãæå®ãããå Žåã劥åœãªæµ®åå°æ°ç¹æ°ãšãªãå€ãæããªããã°ãªããªããããã©ã«ãã®æå€§ã¯100ã§ããã
ããã©ã«ãå€ã¯ãæå°å€ã«æå°å€ãšæå€§å€ã®å·®ã®ååãå ãããã®ã§ããããã ããæå€§å€ãæå°å€ãããå°ããå Žåãé€ãããã®å Žåããã©ã«ãå€ãæå°å€ãšãªãã
When the element is suffering from an underflow, the user agent must set the element's value to a valid floating-point number that represents the minimum.
When the element is suffering from an overflow, if the maximum is not less than the minimum, the user agent must set the element's value to a valid floating-point number that represents the maximum.
The step scale factor is
1. The default step is 1 (allowing only
integers, unless the min attribute has a non-integer
value).
When the element is suffering from a step mismatch, the user agent must round the element's value to the nearest number for which the element would not suffer from a step mismatch, and which is greater than or equal to the minimum, and, if the maximum is not less than the minimum, which is less than or equal to the maximum, if there is a number that matches these constraints. If two numbers match these constraints, then user agents must use the one nearest to positive infinity.
For example, the markup
<input type="range" min=0 max=100 step=20 value=50>
results in a range control whose initial value is 60.
The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating-point number values to input results in an error, then return an error; otherwise, return the resulting number.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating-point number that represents input.
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒautocompleteãlistãmaxãminããã³stepã³ã³ãã³ã屿§ãlistãvalueããã³valueAsNumberIDL屿§ãstepDown()ããã³stepUp()ã¡ãœããã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãmaxlengthãminlengthãmultipleãpatternãplaceholderãreadonlyãrequiredãsizeãsrcãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãselectionStartãselectionEndãselectionDirectionãvalueAsDateIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ã¡ãœããã
ããã§list屿§ããã€ãªãŒãã³ã³ããªãŒããªã¹ãã䜿çšããç¯å²ã³ã³ãããŒã«ã®äŸã瀺ããããšãã°äºåèšå®ãããå
éããŸãã¯é床ã³ã³ãããŒã«ãšããŠäœ¿çšãããç¯å²ã³ã³ãããŒã«ã§å
žåçãªé床å¶éãªã©ãç¹ã«éèŠã§ããã³ã³ãããŒã«ã®å®å
šãªç¯å²ã«æ²¿ã£ãå€ãååšããå Žåãããã¯åœ¹ã«ç«ã€ãããããªããæ¬¡ã®ããŒã¯ã¢ããæçã§ïŒ
<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
<option value="++50">
</datalist>
以äžã®ã¹ã¿ã€ã«ã·ãŒããé©çšããããšããŠïŒ
input { height: 75px; width: 49px; background: #D5CCBB; color: black; }
ãã®ããã«ã¬ã³ããªã³ã°ããããããããªãïŒ
![]()
ãŠãŒã¶ãŒãšãŒãžã§ã³ããã¹ã¿ã€ã«ã·ãŒããæå®ããé«ããšå¹
ã®ããããã£ãŒã®æ¯ããã³ã³ãããŒã«ã®åããæ±ºå®ããæ§åã«æ³šæãããåæ§ã«è²ã¯ã¹ã¿ã€ã«ã·ãŒãããæŽŸçãããã®ã§ãããããããç®çãã¯ããŒã¯ã¢ããã«ç±æ¥ã§ãããå
·äœçã«ã¯ãstep屿§ã¯ç®çãã®é
眮ã«åœ±é¿ãäžããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯èè
ãæå®ããçµäºå€ã䜿çšããããæ±ºå®ããŠãããæ¥µç«¯ã«é·ãç®çãã远å ããã
ç¡å¹ãªå€+50ã¯ãå®å
šã«ç¡èŠãããæ§åã«ã泚æããã
ã»ãã«ãã以äžã®ããŒã¯ã¢ããæçãèããŠã¿ãïŒ
<input name=x type=range min=100 max=700 step=9.09090909 value=509.090909>
ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãæ§ã ãªæ¹æ³ã§è¡šç€ºã§ãããããšãã°ïŒ

ãããã¯ïŒ

ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãã¹ã¿ã€ã«ã·ãŒãã§æå®ããã寞æ³ã«åºã¥ããŠè¡šç€ºããããéžã¶ããšãã§ãããããã¯ãå¹ ã®éãã«ãããããããç®çãã®ããã«åãè§£å床ãç¶æããããšãã§ããã ããã
æåŸã«ã2ã€ã®ã©ãã«ã®å€ãæã€ç¯å²ã³ã³ãããŒã«ã®äŸã次ã«ç€ºãïŒ
<input type="range" name="a" list="a-values"> <datalist id="a-values"> <option value="10" label="Low"> <option value="90" label="High"> </datalist>
ã³ã³ãããŒã«ãåçŽã«æç»ããã¹ã¿ã€ã«ãšãšãã«ã次ã®ããã«ãªãïŒ

type=colorïŒinputèŠçŽ ã¯ãåçŽè²ã衚ãæååã«èŠçŽ ã®å€ãèšå®ããããã®ãè²ã®ã³ã³ãããŒã«ã衚ãã
In this state, there is always a color picked, and there is no way to set the value to the empty string.
If the element is mutable, the user agent should allow the user to change the color represented by its value, as obtained from applying the rules for parsing simple color values to it. User agents must not allow the user to set the value to a string that is not a valid lowercase simple color. If the user agent provides a user interface for selecting a color, then the value must be set to the result of using the rules for serializing simple color values to the user's selection. User agents must not allow the user to set the value to the empty string.
Constraint validation: While the user interface describes input that the user agent cannot convert to a valid lowercase simple color, the control is suffering from bad input.
æå®ãããŠãã€ç©ºã§ãªãå Žåãvalue屿§ã¯ã劥åœãªåçŽè²ã§ããå€ãæããªããã°ãªããªãã
The value sanitization algorithm is as follows: If the value of the element is a valid simple color, then
set it to the value of the element converted to ASCII
lowercase; otherwise, set it to the string "#000000".
以äžã®å
±éinputèŠçŽ ã®ã³ã³ãã³ã屿§ããã³IDL屿§ã¯èŠçŽ ã«é©çšããïŒautocompleteããã³listã³ã³ãã³ã屿§ãlistããã³valueIDL屿§ã
valueIDL屿§ã¯ãã¢ãŒãã®å€ãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãmaxãmaxlengthãminãminlengthãmultipleãpatternãplaceholderãreadonlyãrequiredãsizeãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumberIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
type=checkboxïŒcheckboxïŒããã©ã«ã - èšå®ããªãïŒãŸãã¯menuitemcheckboxãaria-*屿§ãinputèŠçŽ ã¯ããã®èŠçŽ ã®checkednessç¶æ
ã衚ã2ç¶æ
ã³ã³ãããŒã«ã衚ããèŠçŽ ã®checkednessç¶æ
ãtrueã®å Žåãã³ã³ãããŒã«ã¯æ£ã®éžæã衚ããfalseã®å Žåãè² ã®éžæã衚ããèŠçŽ ã®indeterminate DOM屿§ãtrueã«èšå®ãããå Žåãããããã³ã³ãããŒã«ã第3ã®ç¶æ
ã§ãããäžç¢ºå®ã§ãã£ããã®ããã«ãã³ã³ãããŒã«ã®éžæãé ãã¹ãã§ããã
ããšãèŠçŽ ã®indeterminateIDL屿§ãtrueã«èšå®ãããŠããã³ã³ãããŒã«ã¯trueã®3ç¶æ
ã§ã¯ãªããindeterminateIDL屿§ã¯ã第3ã®ç¶æ
ã®å€èгãäžããã
If the element is mutable, then: The pre-click
activation steps consist of setting the element's checkedness to its opposite value (i.e. true if it is false,
false if it is true), and of setting the element's indeterminate IDL attribute to false. The canceled
activation steps consist of setting the checkedness
and the element's indeterminate IDL attribute back to
the values they had before the pre-click activation steps were run. The
activation behavior is to fire a simple event that bubbles named input at the element and then fire a simple event that bubbles named change at the element.
If the element is not mutable, it has no activation behavior.
Constraint validation: If the element is required and its checkedness is false, then the element is suffering from being missing.
indeterminate [ = value ]èšå®ããå Žåãcheckboxã³ã³ãããŒã«ã®è¡šç€ºã¯ãçŸåšã®å€ã衚瀺ãããªãããã«äžæžãããã
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒcheckedããã³requiredã³ã³ãã³ã屿§ãcheckedããã³valueIDL屿§ã
valueIDL屿§ã¯ã¢ãŒãdefault/onãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãautocompleteãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãlistãmaxãmaxlengthãminãminlengthãmultipleãpatternãplaceholderãreadonlyãsizeãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒfilesãlistãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumberIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
type=radioïŒradioïŒããã©ã«ã - èšå®ããªãïŒãŸãã¯menuitemradioãaria-*屿§ãWhen an input element's type attribute is in
the Radio Button state, the rules in this section
apply.
inputèŠçŽ ã¯ãä»ã®inputèŠçŽ ãšçµã¿åãããŠäœ¿çšããå Žåã1ã€ã®ã¿ã®ã³ã³ãããŒã«ããã®checkednessç¶æ
ãtrueã«èšå®ãããããšãã§ããã©ãžãªãã¿ã³ã°ã«ãŒãã圢æããã³ã³ãããŒã«ã衚ããèŠçŽ ã®checkednessç¶æ
ãtrueã§ããå Žåãã³ã³ãããŒã«ã¯ãã°ã«ãŒãå
ã®éžæãããã³ã³ãããŒã«ã衚ããfalseã§ããå ŽåãéžæãããŠãªãã°ã«ãŒãå
ã®ã³ã³ãããŒã«ã瀺ãã
inputèŠçŽ aãå«ãã©ãžãªãã¿ã³ã°ã«ãŒãã¯ãŸããæ¬¡ã®ãã¹ãŠã®æ¡ä»¶ãæºããä»ã®inputèŠçŽ bãå«ãïŒ
inputèŠçŽ bã®type屿§ã¯ãRadio Buttonç¶æ
ãšãªããname屿§ãæã¡ããããã®name屿§ã空ã§ãªãããã€aã®name屿§å€ãbã®name屿§å€ãšäºææ§å€§æåã»å°æåäžåºå¥ã§äžèŽãããææžã¯ãã©ãžãªãã¿ã³ã°ã«ãŒãããã®èŠçŽ ã®ã¿ãå«ãinputèŠçŽ ãå«ããŠã¯ãªããªãã
When any of the following phenomena occur, if the element's checkedness state is true after the occurrence, the checkedness state of all the other elements in the same radio button group must be set to false:
name attribute is set, changed, or
removed.If the element is mutable, then: The pre-click
activation steps consist of setting the element's checkedness to true. The canceled activation steps
consist of setting the element's checkedness to false. The
activation behavior is to fire a simple event that bubbles named input at the element and then fire a simple event that bubbles named change at the element.
If the element is not mutable, it has no activation behavior.
Constraint validation: If an element in the radio button group is required, and all of the input elements in the
radio button group have a checkedness that is
false, then the element is suffering from being missing.
ãã¿ã³ãææžã«æ¿å ¥ãããéã«ãã©ãžãªãã¿ã³ã°ã«ãŒãå ã®ã©ãžãªãã¿ã³ããããããã§ãã¯ãããªãå ŽåãïŒãŠãŒã¶ãŒãŸãã¯ã¹ã¯ãªããã®ããããã«ãã£ãŠïŒãã¿ã³ã®1ã€ããã§ãã¯ãããããã«ãªããŸã§ãã€ã³ã¿ãŒãã§ãŒã¹ã§åæã«ãã§ãã¯ãããªãã ããã
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒcheckedããã³requiredã³ã³ãã³ã屿§ãcheckedããã³valueIDL屿§ã
valueIDL屿§ã¯ã¢ãŒãdefault/onãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãautocompleteãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãlistãmaxãmaxlengthãminãminlengthãmultipleãpatternãplaceholderãreadonlyãsizeãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒfilesãlistãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumberIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
type=fileïŒWhen an input element's type attribute is in
the File Upload state, the rules in this section
apply.
inputèŠçŽ ã¯ãåãã¡ã€ã«ããã¡ã€ã«åããã¡ã€ã«ã¿ã€ãããã¡ã€ã«æ¬äœïŒãã¡ã€ã«ã®å
容ïŒã§æ§æããããéžæããããã¡ã€ã«ã®ãªã¹ãã衚ãã
File names must not contain path components, even in the case that a user has selected an entire directory hierarchy or multiple files with the same name from different directories.
Unless the multiple attribute is set, there must be
no more than one file in the list of selected
files.
If the element is mutable, then the element's activation behavior is to run the following steps:
If the algorithm is not allowed to show a popup, then abort these steps without doing anything else.
Return, but continue running these steps asynchronously.
Optionally, wait until any prior execution of this algorithm has terminated.
Display a prompt to the user requesting that the user specify some files. If the multiple attribute is not set, there must be no more than one
file selected; otherwise, any number may be selected. Files can be from the filesystem or created
on the fly, e.g. a picture taken from a camera connected to the user's device.
Wait for the user to have made their selection.
Queue a task to first update the element's selected files so that it represents the user's
selection, then fire a simple event that bubbles named input at the input element, and finally fire a
simple event that bubbles named change at the
input element.
If the element is mutable, the user agent should allow the
user to change the files on the list in other ways also, e.g. adding or removing files by
drag-and-drop. When the user does so, the user agent must queue a task to first
update the element's selected files so that
it represents the user's new selection, then fire a simple event that bubbles named
input at the input element, and finally fire
a simple event that bubbles named change at the
input element.
If the element is not mutable, it has no activation behavior and the user agent must not allow the user to change the element's selection.
Constraint validation: If the element is required and the list of selected files is empty, then the element is suffering from being missing.
accept屿§ã¯ãã©ã®ãã¡ã€ã«ã¿ã€ããåãå
¥ãããããã®ãã³ããšãšãã«ãŠãŒã¶ãŒãšãŒãžã§ã³ããæäŸããããã«æå®ãããŠãããã
æå®ãããå Žåããã®å±æ§ã¯ã次ã®ãããããšASCII倧æåã»å°æåäžåºå¥ã§äžèŽããªããã°ãªããªãããããããã«ã³ãåºåãã®ããŒã¯ã³ã®ã»ããã§æ§æããªããã°ãªããªãã
audio/*video/*image/*ããŒã¯ã³ã¯ãä»ã®ããŒã¯ã³ã®ãããããšASCII倧æåã»å°æåäžåºå¥ã§äžèŽããŠã¯ãªããªãïŒã€ãŸãéè€ã¯èš±å¯ãããªãïŒãTo obtain the list of tokens from the attribute, the user agent must split the attribute value on commas.
ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãäžè¬çãªãã¡ã€ã«ããã«ãŒãããé©åãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã衚瀺ããããã«ãã®å±æ§ã®å€ã䜿çšããŠããããããšãã°ãå€image/*ãäžãããããšããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãŠãŒã¶ãŒã«ããŒã«ã«ã«ã¡ã©ã®ãªãã·ã§ã³ããåçã³ã¬ã¯ã·ã§ã³ããåçã®éžæãæäŸã§ãããå€audio/*ãäžãããããšããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããŠãŒã¶ãŒã«ãããã»ããã®ãã€ã¯ã䜿çšããŠã¯ãªãããèšé²ãããªãã·ã§ã³ãæäŸã§ããã
User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.
èè ã¯ãç¹å®ã®åœ¢åŒã§ããŒã¿ãæ€çŽ¢ããéãä»»æã®MIMEã¿ã€ããšå¯Ÿå¿ããæ¡åŒµåã®äž¡æ¹ãæå®ããããšãæšå¥šãããã
ããšãã°ãMicrosoft WordææžãOpen Document圢åŒã®ãã¡ã€ã«ã«å€æããã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ããMicrosoft Wordææžã¯å€çš®å€æ§ãªMIMEã¿ã€ããšæ¡åŒµåã§èšèŒãããã®ã§ã次ã®ããã«ããµã€ãã¯è€æ°åæã§ããïŒ
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
ãã¡ã€ã«ã®çš®é¡ãèšè¿°ããããã«ãã¡ã€ã«æ¡åŒµåã®ã¿ã䜿çšãããã©ãããã©ãŒã äžã§ãããããã°ãä»ã®æ¡åŒµåãå€å¥ããããã«ãMIMEã¿ã€ããã·ã¹ãã ã®åç»é²ããŒãã«ïŒã·ã¹ãã ã§äœ¿çšãããæ¡åŒµåã«MIMEã¿ã€ãã察å¿ä»ããïŒãšãšãã«äœ¿çšã§ãããšåæã«ãããã«èšèŒãããæ¡åŒµåã¯ãèš±å¯ãããææžããã£ã«ã¿ããããã«äœ¿çšã§ãããåæ§ã«ãã·ã¹ãã ããã¡ã€ã«åãŸãã¯æ¡åŒµåãæããªãããå éšçã«MIMEã¿ã€ãããã€ææžãèå¥ããã·ã¹ãã ã§ãã·ã¹ãã ã§äœ¿çšãããMIMEã¿ã€ãã«æ¢ç¥ã®æ¡åŒµåã察å¿ã¥ããæ¡åŒµåç»é²ããŒãã«ãã·ã¹ãã ãæã€å Žåãæ¡åŒµåã䜿çšã§ãããšåæã«ãMIMEã¿ã€ãã¯èš±å¯ããããã¡ã€ã«ãéžæããããã«äœ¿çšã§ããã
æ¡åŒµåã¯ææ§ã«ãªãåŸåãããïŒããšãã°ã".dat"æ¡åŒµåã䜿çšããè«å€§ãªæ°ã®ãã©ãŒããããååšããŠãããMicrosoft Wordã®ææžã§ãªãå Žåã§ãããŠãŒã¶ãŒã¯éåžžãéåžžã«ç°¡åã«".doc"ãšããæ¡åŒµåãæã€ãã¡ã€ã«åã«å€æŽã§ããïŒããããŠMIMEã¿ã€ãã¯ä¿¡é Œæ§ãäœããªãåŸåãããïŒããšãã°ãå€ãã®ãã©ãŒãããã¯æ£åŒã«ç»é²ãããåãæãããå®éã«å€ãã®ãã©ãŒãããã倿°ã®ç°ãªãMIMEã¿ã€ããçšããŠèå¥ãããïŒããŠãŒã¶ãŒãæµå¯Ÿçã§ãªãããŠãŒã¶ãŒãšãŒãžã§ã³ããå®å
šã«accept屿§ã®èŠä»¶ã«åŸã£ãå Žåã§ãã£ãŠãããããæåŸ
ããããã©ãŒãããã§ãªããããããªãã®ã§ãèè
ã¯éåžžãã¯ã©ã€ã¢ã³ãããåä¿¡ããããŒã¿ãæ
éã«æ±ãããã¹ãã§ããããšã«æ³šæããã
æŽå²çãªçç±ã«ãããvalue IDL屿§ã¯ããã¡ã€ã«åã«æåå"C:\fakepath\"ãæ¥é èŸãšããŠä»ãããäžéšã®ã¬ã¬ã·ãŒãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå®éã«ïŒã»ãã¥ãªãã£ãŒäžã®è匱æ§ããã£ãïŒå®å
šãªãã¹ãå«ãããã®çµæãšããŠãåŸæ¹äºææ§ã®ããæ¹æ³ã§value IDL屿§ãããã¡ã€ã«åãååŸããããšã¯èªæã§ã¯ãªããæ¬¡ã®é¢æ°ã¯é©åã«äºææ§ã®ããæ¹æ³ã§ãã¡ã€ã«åãæœåºããïŒ
function extractFilename(path) {
if (path.substr(0, 12) == "C:\\fakepath\\")
return path.substr(12); // modern browser
var x;
x = path.lastIndexOf('/');
if (x >= 0) // Unix-based path
return path.substr(x+1);
x = path.lastIndexOf('\\');
if (x >= 0) // Windows-based path
return path.substr(x+1);
return path; // just the file name
}
ããã¯æ¬¡ã®ããã«äœ¿çšã§ããïŒ
<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
function updateFilename(path) {
var name = extractFilename(path);
document.getElementById('filename').textContent = name;
}
</script>
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒacceptãmultipleãrequiredã³ã³ãã³ã屿§ãfilesãvalueIDL屿§ã
value IDL屿§ã¯ãã¢ãŒãã®ãã¡ã€ã«åãšãªãã
inputããã³changeã€ãã³ãã¯é©çšããã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãautocompleteãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãlistãmaxãmaxlengthãminãminlengthãpatternãplaceholderãreadonlyãsizeãsrcãstepãwidthã
èŠçŽ ã®value屿§ã¯çç¥ããªããã°ãªããªãã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãlistãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumberIDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
type=submitïŒbutton ïŒããã©ã«ã - èšå®ããªãïŒãaria-*屿§ãWhen an input element's type attribute is in
the Submit Button state, the rules in this section
apply.
inputèŠçŽ ã¯ãã¢ã¯ãã£ãã«ãªã£ãéããã©ãŒã ãéä¿¡ãããã¿ã³ã衚ããIf the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Submit" or some such. The element is a button, specifically a submit button.
If the element is mutable, then the element's
activation behavior is as follows: if the element has a form owner,
and the element's Document is fully active,
submit the form owner from the
input element; otherwise, do nothing.
If the element is not mutable, it has no activation behavior.
formactionãformenctypeãformmethodãformnovalidateãformtarget屿§ã¯ããã©ãŒã éä¿¡çšã®å±æ§ã§ããã
formnovalidate屿§ã¯ãå¶çŽæ€èšŒãããªã¬ãŒããªãéä¿¡ãã¿ã³ãäœæããããã«äœ¿çšã§ããã
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒformactionãformenctypeãformmethodãformnovalidateãããã³formtargetã³ã³ãã³ã屿§ãvalue IDL屿§ã
value IDL屿§ã¯ã¢ãŒãdefaultãšãªãã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãautocompleteãcheckedãdirnameãheightãlistãmaxãmaxlengthãminãminlengthãmultipleãpatternãplaceholderãreadonlyãrequiredãsizeãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãlistãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumber IDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
inputããã³changeã€ãã³ãã¯é©çšããªãã
type=imageïŒbutton ïŒããã©ã«ã - èšå®ããªãïŒãlinkãmenuitemãmenuitemcheckboxãmenuitemradioãŸãã¯radioãaria-*屿§ãWhen an input element's type attribute is in
the Image Button state, the rules in this section
apply.
inputèŠçŽ ã¯ããŠãŒã¶ãŒã座æšãéžæããŠãã©ãŒã ãéä¿¡ããç»åããŸãã¯ä»£ããã«ããŠãŒã¶ãŒããã©ãŒã ãéä¿¡ã§ãããã¿ã³ã衚ããèŠçŽ ã¯ãå
·äœçã«éä¿¡ãã¿ã³ãšãªããã¿ã³ã§ããã
座æšã«å¯Ÿãã2ã€ã®ãšã³ããªãŒãéä¿¡ããããšã«ãã£ãŠãã©ãŒã ã®éä¿¡æã«ãµãŒããŒã«éä¿¡ãããå¶åŸ¡ã®ååããåŸããããã".x"ãš".y"ã¯ããããã®åº§æšã®xãšyæåããã€ååã«ä»å ãããã
ç»åã¯src屿§ã«ãã£ãŠæå®ããããsrc屿§ã¯ååšããªããã°ãªãããç»åãªãœãŒã¹ã¯æœåšçã«ããŒãžåãã¹ã¯ãªããåããããŠããªããä»»æã§ã¢ãã¡ãŒã·ã§ã³ã§ãããé察話åãåç
§ããæœåšçã«ã¹ããŒã¹ã§å²ãŸãã劥åœãªç©ºã§ãªãURLãå«ããªããã°ãªããªãã
When any of the following events occur, unless the user agent cannot support images, or its
support for images has been disabled, or the user agent only fetches elements on demand, or the
src attribute's value is the empty string, the user agent must
resolve the value of the src attribute, relative to the element, and if that is successful,
must fetch the resulting absolute URL:
input element's type attribute is first
set to the Image Button state (possibly when the
element is first created), and the src attribute is
present.input element's type attribute is
changed back to the Image Button state, and the src attribute is present, and its value has changed since the last
time the type attribute was in the Image Button state.input element's type attribute is in
the Image Button state, and the src attribute is set or changed.Fetching the image must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
If the image was successfully obtained, with no network errors, and the image's type is a supported image type, and the image is a valid image of that type, then the image is said to be available. If this is true before the image is completely downloaded, each task that is queued by the networking task source while the image is being fetched must update the presentation of the image appropriately.
The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.
User agents must not support non-image resources with the input element. User
agents must not run executable code embedded in the image resource. User agents must only display
the first page of a multipage resource. User agents must not allow the resource to act in an
interactive fashion, but should honor any animation in the resource.
The task that is queued by
the networking task source once the resource has been fetched, must, if the download was successful and the image is available, queue a task to fire a simple
event named load at the input element; and
otherwise, if the fetching process fails without a response from the remote server, or completes
but the image is not a valid or supported image, queue a task to fire a simple
event named error on the input element.
alt屿§ã¯ãç»åã䜿çšã§ããªããŠãŒã¶ãŒããã³ãŠãŒã¶ãŒãšãŒãžã§ã³ãã®ããã«ãã¿ã³ã®ããã¹ãã©ãã«ãæäŸãããalt屿§ã¯ååšããªããã°ãªãããç»åãå©çšã§ããªãã£ãå Žåã«ç䟡ãªãã¿ã³ã«å¯ŸããŠé©åã ããã©ãã«ãäžãã空ã§ãªãæååãå«ãŸãªããã°ãªããªãã
inputèŠçŽ ã¯ã寞æ³å±æ§ããµããŒãããã
If the src attribute is set, and the image is available and the user agent is configured to display that image,
then: The element represents a control for selecting a coordinate from the image specified by the
src attribute; if the element is mutable, the user agent should allow the user to select this coordinate, and the element's activation
behavior is as follows: if the element has a form owner, and the element's
Document is fully active, take the user's selected coordinate, and submit the input element's form owner
from the input element. If the user activates the control without explicitly
selecting a coordinate, then the coordinate (0,0) must be assumed.
Otherwise, the element represents a submit button whose label is given by the
value of the alt attribute; if the element is mutable, then the element's activation behavior is as
follows: if the element has a form owner, and the element's Document is
fully active, set the selected
coordinate to (0,0), and submit the
input element's form owner from the input element.
In either case, if the element is mutable but has no
form owner or the element's Document is not fully active,
then its activation behavior must be to do nothing. If the element is not mutable, it has no activation behavior.
The selected coordinate must consist of an x-component and a y-component. The coordinates represent the position relative to the edge of the image, with the coordinate space having the positive x direction to the right, and the positive y direction downwards.
The x-component must be a valid integer representing a number x in the range â(borderleft+paddingleft) †x †width+borderright+paddingright, where width is the rendered width of the image, borderleft is the width of the border on the left of the image, paddingleft is the width of the padding on the left of the image, borderright is the width of the border on the right of the image, and paddingright is the width of the padding on the right of the image, with all dimensions given in CSS pixels.
The y-component must be a valid integer representing a number y in the range â(bordertop+paddingtop) †y †height+borderbottom+paddingbottom, where height is the rendered height of the image, bordertop is the width of the border above the image, paddingtop is the width of the padding above the image, borderbottom is the width of the border below the image, and paddingbottom is the width of the padding below the image, with all dimensions given in CSS pixels.
Where a border or padding is missing, its width is zero CSS pixels.
formactionãformenctypeãformmethodãformnovalidateãformtarget屿§ã¯ããã©ãŒã éä¿¡çšã®å±æ§ã§ããã
width [ = value ]height [ = value ]ãããã®å±æ§ã¯ãå®éã®ã¬ã³ããªã³ã°ãããç»åã®å€§ããããŸãã¯å¯žæ³ãæªç¥ã§ããå Žåã«0ãè¿ãã
察å¿ããã³ã³ãã³ã屿§ã倿Žããããã«ãèšå®ãå¯èœã§ããã
以äžã®å
±éinputèŠçŽ ã³ã³ãã³ã屿§ãIDL屿§ãããã³ã¡ãœããã¯èŠçŽ ã«é©çšããïŒaltãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãsrcããã³widthã³ã³ãã³ã屿§ãvalue IDL屿§ã
value IDL屿§ã¯ã¢ãŒãdefaultãšãªãã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãautocompleteãcheckedãdirnameãlistãmaxãmaxlengthãminãminlengthãmultipleãpatternãplaceholderãreadonlyãrequiredãsizeãstepã
èŠçŽ ã®value屿§ã¯çç¥ããªããã°ãªããªãã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãlistãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumber IDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
inputããã³changeã€ãã³ãã¯é©çšããªãã
ãã®ç¶æ
ã®æåã«é¢ããŠå€ãã®åŽé¢ã¯ãimgèŠçŽ ã®æåã«äŒŒãŠãããèªè
ã¯ãåãèŠä»¶ã®å€ãããã詳现ã«èšèŒãããç¯ãèªãããšãæšå¥šããã
次ã®ãã©ãŒã ãåããšïŒ
<form action="process.cgi"> <input type=image src=map.png name=where alt="Show location list"> </form>
ãŠãŒã¶ãŒã座æšïŒ127,40ïŒã§ç»åãã¯ãªãã¯ããå Žåããã©ãŒã ãéä¿¡ããããã«äœ¿çšãããURLã¯"process.cgi?where.x=127&where.y=40"ãšãªãã
ïŒãã®äŸã«ãããŠããããã衚瀺ãããªããŠãŒã¶ãŒãããã³"Show location list"ãšããã©ãã«ã®ä»ãããã¿ã³ã衚瀺ããããŠãŒã¶ãŒãä»®å®ãããã¿ã³ãã¯ãªãã¯ããããšã¯ãããã®ä»£ããããéžæããå Žæã®ãªã¹ãã®è¡šç€ºããµãŒããŒã«ããããïŒ
type=resetïŒbutton ïŒããã©ã«ã - èšå®ããªãïŒãaria-*屿§ãWhen an input element's type attribute is in
the Reset Button state, the rules in this section
apply.
ã¢ã¯ãã£ãã®éãinputèŠçŽ ã¯ããã©ãŒã ããªã»ãããããã¿ã³ã衚ããIf the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Reset" or some such. The element is a button.
If the element is mutable, then the element's
activation behavior, if the element has a form owner and the element's
Document is fully active, is to reset the form owner; otherwise, it is to do
nothing.
If the element is not mutable, it has no activation behavior.
Constraint validation: The element is barred from constraint validation.
valueIDL屿§ã¯ããã®èŠçŽ ã«é©çšãããã¢ãŒãã®ããã©ã«ããšãªãã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãautocompleteãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãlistãmaxãmaxlengthãminãminlengthãmultipleãpatternãplaceholderãreadonlyãrequiredãsizeãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãlistãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumber IDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
inputããã³changeã€ãã³ãã¯é©çšããªãã
type=buttonïŒbutton ïŒããã©ã«ã - èšå®ããªãïŒãlinkãmenuitemãmenuitemcheckboxãmenuitemradioãŸãã¯radioãaria-*屿§ãinputèŠçŽ ã¯ãããã©ã«ãã®åäœããããªããã¿ã³ã衚ããèŠçŽ ã空æååã§ãããããããªããããã¿ã³ã®ã©ãã«ã¯ãvalue屿§ã§æå®ãããªããã°ãªããªããIf the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be the empty string. The element is a button.
If the element is mutable, the element's activation behavior is to do nothing.
If the element is not mutable, it has no activation behavior.
Constraint validation: The element is barred from constraint validation.
valueIDL屿§ã¯ããã®èŠçŽ ã«é©çšãããã¢ãŒãã®ããã©ã«ããšãªãã
以äžã®ã³ã³ãã³ã屿§ãæå®ããŠã¯ãªãããèŠçŽ ã«é©çšããªãïŒacceptãaltãautocompleteãcheckedãdirnameãformactionãformenctypeãformmethodãformnovalidateãformtargetãheightãlistãmaxãmaxlengthãminãminlengthãmultipleãpatternãplaceholderãreadonlyãrequiredãsizeãsrcãstepãwidthã
以äžã®IDL屿§ãšã¡ãœããã¯ãèŠçŽ ã«é©çšããªãïŒcheckedãfilesãlistãselectionStartãselectionEndãselectionDirectionãvalueAsDateãvalueAsNumber IDL屿§ãselect()ãsetRangeText()ãsetSelectionRange()ãstepDown()ãstepUp()ã¡ãœããã
inputããã³changeã€ãã³ãã¯é©çšããªãã
ãã®ç¯ã¯éèŠç¯çã§ããã
The formats shown to the user in date, time, and number controls is independent of the format used for form submission.
Browsers are encouraged to use user interfaces that present dates, times, and numbers according
to the conventions of either the locale implied by the input element's
language or the user's preferred locale. Using the page's locale will ensure
consistency with page-provided data.
For example, it would be confusing to users if an American English page claimed that a Cirque De Soleil show was going to be showing on 02/03, but their browser, configured to use the British English locale, only showed the date 03/02 in the ticket purchase date picker. Using the page's locale would at least ensure that the date was presented in the same format everywhere. (There's still a risk that the user would end up arriving a month late, of course, but there's only so much that can be done about such cultural differences...)
inputèŠçŽ å±æ§These attributes only apply to an input
element if its type attribute is in a state whose definition
declares that the attribute applies. When an attribute
doesn't apply to an input element, user agents must
ignore the attribute, regardless of the requirements and definitions below.
minããã³max屿§The maxlength attribute, when it applies, is a form control maxlength attribute controlled by the input element's dirty value flag.
The minlength attribute, when it applies, is a form control minlength attribute controlled by the input element's dirty value flag.
inputèŠçŽ ãæå€§èš±å®¹å€ã®é·ããæã€å Žåããã®èŠçŽ ã®value屿§å€ã«å±ããã³ãŒãåäœé·ãã¯ãèŠçŽ ã®æå€§èš±å®¹å€ã®é·ã以äžã§ãªããã°ãªããªãã
æ¬¡ã®æç²ã¯ãç°¡æœã§ãããããªãã®åªäœãéããä»»æã®äŒè©±ã匷å¶ããŠã€ã³ããªãžã§ã³ããªè«è©±ã«å察ãããããªãã¡ãã»ãŒãžã³ã°ã¯ã©ã€ã¢ã³ãã®ããã¹ãå ¥åãä»»æã«åºå®æåæ°ã«å¶éã§ããæ¹æ³ã瀺ãã
<label>What are you doing? <input name=status maxlength=140></label>
ããã§ã¯ããã¹ã¯ãŒããæå°ã®é·ããäžããããïŒ
<p><label>Username: <input name=u required></label> <p><label>Password: <input name=p required minlength=12></label>
size屿§èŠèŠçãªã¬ã³ããªã³ã°ã«ãããŠãsize屿§ã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ããèŠçŽ ã®å€ãç·šéããŠããéã«ãŠãŒã¶ãŒãåç
§ã§ããããã«ãããæåæ°ãäžããã
size屿§ãæå®ãããå ŽåããŒããã倧ãã劥åœãªè² ã§ãªãæŽæ°ã§ããå€ãæããªããã°ãªããªãã
If the attribute is present, then its value must be parsed using the rules for parsing non-negative integers, and if the result is a number greater than zero, then the user agent should ensure that at least that many characters are visible.
The size IDL attribute is limited to only
non-negative numbers greater than zero and has a default value of 20.
readonly屿§readonly屿§ã¯ããŠãŒã¶ãŒããã©ãŒã ã³ã³ãããŒã«ãç·šéã§ãããã©ãããå¶åŸ¡ããçåœå±æ§ã§ãããWhen specified, the element is not mutable.
Constraint validation: If the readonly attribute is specified on an input
element, the element is barred from constraint validation.
disabledãšreadonlyãšã®éãã¯ãç¡å¹ãªã³ã³ãããŒã«ã«é察話åã§ããã®ã«å¯Ÿããèªã¿åãå°çšã³ã³ãããŒã«ã¯ãäŸç¶ãšããŠãã©ãŒã«ã¹å¯èœã§ããã®ã§ããŠãŒã¶ãŒã¯ãŸã ããã¹ããéžæã察話ã§ãããïŒãã®ãããªçç±ãããããã¹ãã®ã¿ã®ã³ã³ãããŒã«ã¯èªã¿åãå°çšã«ã§ãããããšãã°ããã§ãã¯ããã¯ã¹ããã¿ã³ã®æå³ããªããªãã ãããïŒ
次ã®äŸã«ãããŠãæ¢åã®è£œåèå¥åã¯å€æŽã§ããªãããïŒèå¥åããŸã å ¥åãããŠããªãå Žæã§ïŒæ°è£œåã衚ãè¡ãšã®äžè²«æ§ãä¿ã€ããã«ããããã¯äŸç¶ãšããŠãã©ãŒã ã®äžéšãšããŠè¡šç€ºãããã
<form action="products.cgi" method="post" enctype="multipart/form-data"> <table> <tr> <th> Product ID <th> Product name <th> Price <th> Action <tr> <td> <input readonly="readonly" name="1.pid" value="H412"> <td> <input required="required" name="1.pname" value="Floor lamp Ulke"> <td> $<input required="required" type="number" min="0" step="0.01" name="1.pprice" value="49.99"> <td> <button formnovalidate="formnovalidate" name="action" value="delete:1">Delete</button> <tr> <td> <input readonly="readonly" name="2.pid" value="FG28"> <td> <input required="required" name="2.pname" value="Table lamp Ulke"> <td> $<input required="required" type="number" min="0" step="0.01" name="2.pprice" value="24.99"> <td> <button formnovalidate="formnovalidate" name="action" value="delete:2">Delete</button> <tr> <td> <input required="required" name="3.pid" value="" pattern="[A-Z0-9]+"> <td> <input required="required" name="3.pname" value=""> <td> $<input required="required" type="number" min="0" step="0.01" name="3.pprice" value=""> <td> <button formnovalidate="formnovalidate" name="action" value="delete:3">Delete</button> </table> <p> <button formnovalidate="formnovalidate" name="action" value="add">Add</button> </p> <p> <button name="action" value="update">Save</button> </p> </form>
required屿§required屿§ã¯çåœå±æ§ã§ãããæå®ãããå ŽåãèŠçŽ ã¯requiredãšãªãã
Constraint validation: If the element is required, and its value
IDL attribute applies and is in the mode value, and the element is mutable, and the element's value is the empty string, then the element is suffering
from being missing.
以äžã®ãã©ãŒã ã¯ãé»åã¡ãŒã«ã¢ãã¬ã¹ã«å¯ŸããŠããã³ãã¹ã¯ãŒãã«å¯ŸããŠã®2ã€ã®å¿ é ãã£ãŒã«ããæã€ããã©ãŒã ã¯ãŸãããŠãŒã¶ãŒããã¹ã¯ãŒããã£ãŒã«ãããã³3ã€ç®ã®ãã£ãŒã«ãã§åããã¹ã¯ãŒããæã¡èŸŒãå Žåã«ã劥åœã§ãããšã¿ãªããã3ã€ç®ã®ãã£ãŒã«ããæã€ã
<h1>Create new account</h1>
<form action="/newaccount" method=post
oninput="up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')">
<p>
<label for="username">E-mail address:</label>
<input id="username" type=email required name=un>
<p>
<label for="password1">Password:</label>
<input id="password1" type=password required name=up>
<p>
<label for="password2">Confirm password:</label>
<input id="password2" type=password name=up2>
<p>
<input type=submit value="Create account">
</form>
ã©ãžãªãã¿ã³ã«å¯ŸããŠãã°ã«ãŒãå
ã®ã©ãžãªãã¿ã³ã®ãããããéžæãããŠããå Žåãrequired屿§ã¯æºããããããããã£ãŠæ¬¡ã®äŸã«ãããŠãå¿
é ãšããŠããŒã¯ããã1ã€ã®ã¿ã§ãªããã©ãžãªãã¿ã³ã®ããããããã§ãã¯ããããã
<fieldset> <legend>Did the movie pass the Bechdel test?</legend> <p><label><input type="radio" name="bechdel" value="no-characters"> No, there are not even two female characters in the movie. </label> <p><label><input type="radio" name="bechdel" value="no-names"> No, the female characters never talk to each other. </label> <p><label><input type="radio" name="bechdel" value="no-topic"> No, when female characters talk to each other it's always about a male character. </label> <p><label><input type="radio" name="bechdel" value="yes" required> Yes. </label> <p><label><input type="radio" name="bechdel" value="unknown"> I don't know. </label> </fieldset>
ã©ãžãªãã¿ã³ã°ã«ãŒããå¿ é ãšããããã©ããã«ããããããæ··ä¹±ãé¿ããããã«ãèè ã¯ãã°ã«ãŒãå ã®ãã¹ãŠã®ã©ãžãªãã¿ã³ã§å±æ§ãæå®ããããšãæšå¥šããããå®éäžè¬ã«ãããã¯ãŠãŒã¶ãŒãæ»ãããšãã§ããªãç¶æ ã§ãããããèè ã¯ãæåã®å Žæã§ä»»æã®æåã«ãã§ãã¯ããã³ã³ãããŒã«ãæããªãã©ãžãªãã¿ã³ã°ã«ãŒããåé¿ããããšãæšå¥šãããŠããããããã£ãŠäžè¬ã«è²§åŒ±ãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãšèŠãªãããã
multiple屿§multiple屿§ã¯ããŠãŒã¶ãŒã«è€æ°ã®å€ãæå®ããããšãèš±å¯ãããã©ããã瀺ãçåœå±æ§ã§ããã
以äžã®æç²ã¯ãé»åã¡ãŒã«ã¯ã©ã€ã¢ã³ãã®"Cc"ã®ãã£ãŒã«ããè€æ°ã®é»åã¡ãŒã«ã¢ãã¬ã¹ãåãå ¥ããããšãã§ããæ¹æ³ã瀺ãã
<label>Cc: <input type=email multiple name=cc></label>
ãŠãŒã¶ãŒã®é£çµ¡å ããŒã¿ããŒã¹ã§å€ãã®å人ã®éã§ããŠãŒã¶ãŒãã2人ã®å人"Arthur Dent"ïŒã¢ãã¬ã¹"art@example.net"ïŒãš"Adam Josh"ïŒã¢ãã¬ã¹"adamjosh@example.net"ïŒæã£ãŠããå ŽåããŠãŒã¶ãŒã"a"ãå ¥åããåŸã«ããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããŠãŒã¶ãŒã«ããã2ã€ã®é»åã¡ãŒã«ã¢ãã¬ã¹ãæšå¥šãããããããªãã

ãã®ããŒãžã¯ãŸãããµã€ããããŠãŒã¶ãŒã®é£çµ¡å ããŒã¿ããŒã¹ã«ãªã³ã¯ã§ããïŒ
<label>Cc: <input type=email multiple name=cc list=contacts></label> ... <datalist id="contacts"> <option value="hedral@damowmow.com"> <option value="pillar@example.com"> <option value="astrophy@cute.example"> <option value="astronomy@science.example.org"> </datalist>
ãŠãŒã¶ãŒããã®ããã¹ããã£ãŒã«ãã«"bob@example.net"ãå
¥åããåŸã"a"ã§å§ãŸã2çªç®ã®é»åã¡ãŒã«ã¢ãã¬ã¹ãå
¥åãå§ããŠãããšä»®å®ããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãåè¿°ãã2人ã®å人ã ãã§ãªããdatalistèŠçŽ ã§æå®ããã"astrophy"ãš"astronomy"ã®å€ã®äž¡æ¹ã衚瀺ãããããããªãã

æ¬¡ã®æç²ã¯ãé»åã¡ãŒã«ã¯ã©ã€ã¢ã³ãã®"Attachments"ãã£ãŒã«ãããã¢ããããŒãçšã«è€æ°ãã¡ã€ã«ãåãå ¥ããããšãã§ããæ§åã瀺ãã
<label>Attachments: <input type=file multiple name=att></label>
pattern屿§pattern屿§ã¯ãã³ã³ãããŒã«ã®å€ããªãã¡ãmultiple屿§ãé©çšãããŠèšå®ãããå Žåãã³ã³ãããŒã«ã®è€æ°ã®å€ããã§ãã¯ããã察象ãšãªãæ£èŠè¡šçŸãæå®ããã
æå®ãããå Žåã屿§å€ã¯ãJavaScriptãã¿ãŒã³çæèŠåã«ãããããªããã°ãªããªãã[ECMA262]
If an input element has a pattern
attribute specified, and the attribute's value, when compiled as a JavaScript regular expression
with the global, ignoreCase, and multiline flags disabled (see ECMA262 Edition 5, sections 15.10.7.2
through 15.10.7.4), compiles successfully, then the resulting regular expression is the element's
compiled pattern regular expression. If the element has no such attribute, or if the
value doesn't compile successfully, then the element has no compiled pattern regular
expression. [ECMA262]
Constraint validation: If the element's value is not the empty string, and either the element's multiple attribute is not specified or it does not apply to the input element given its type attribute's current state, and the element has a
compiled pattern regular expression but that regular expression does not match the
entirety of the element's value, then the element is
suffering from a pattern mismatch.
Constraint validation: If the element's value is not the empty string, and the element's multiple attribute is specified and applies to the input element, and the element has
a compiled pattern regular expression but that regular expression does not match the
entirety of each of the element's values, then the
element is suffering from a pattern mismatch.
The compiled pattern regular expression, when matched against a string, must have its start anchored to the start of the string and its end anchored to the end of the string.
This implies that the regular expression language used for this attribute is the
same as that used in JavaScript, except that the pattern
attribute is matched against the entire value, not just any subset (somewhat as if it implied a
^(?: at the start of the pattern and a )$ at the
end).
inputèŠçŽ ãæå®ãããpattern屿§ãæã€å Žåãèè
ã¯ãã³ã³ãããŒã«ã®è¿ãã«ãã¿ãŒã³ã®èª¬æãæäŸãã¹ãã§ãããèè
ã¯ããã¿ãŒã³ã®èª¬æãäžããããã®title屿§ãå«ãã§ããããååšããå Žåããã¿ãŒã³ãäžèŽããªãããšããŠãŒã¶ãŒã«éç¥ããããŸãã¯ããŒã«ãããã§ãŸãã¯ã³ã³ãããŒã«ããã©ãŒã«ã¹ãååŸããéã«æ¯æŽæè¡ã«ãã£ãŠèªã¿åºããããªã©ãä»ã®ä»»æã®é©åãªæç¹ã§ããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããã®å±æ§ã®ã³ã³ãã³ãã䜿çšããŠãããã
title屿§ã«äŸåããããšã¯ãå€ãã®ãŠãŒã¶ãŒãšãŒãžã§ã³ãããã®ä»æ§ã§èŠæ±ããããããªã¢ã¯ã»ã¹å¯èœãªæ¹æ³ã§å±æ§ãå
¬éããªããããçŸåšæšå¥šãããªãïŒããšãã°ãããŒã«ããããåºçŸãããããŠã¹ãªã©ã®ãã€ã³ãã£ã³ã°ããã€ã¹ãå¿
èŠã«ãªããããã¯è¿ä»£çãªæºåž¯ç«¯æ«ãã¿ãã¬ããããã€äººã®ãããªãããŒããŒãã®ã¿ã®ãŠãŒã¶ãŒãšã¿ããã®ã¿ã®ãŠãŒã¶ãŒãç· ãåºãïŒã
ããšãã°ãæ¬¡ã®æçã¯inputã®äžã«ããããã¹ãã§ãã¿ãŒã³ã®èª¬æãå«ã¿ããã¿ãŒã³èšè¿°ããŸãtitle屿§ã«å«ãŸããŠãïŒ
<label> Part number:
<input pattern="[0-9][A-Z]{3}" name="part"
data-x="A part number is a digit followed by three uppercase letters."/>
</label>
<p>A part number is a digit followed by three uppercase letters.</p>
ããã¹ãå ã®ãã¿ãŒã³èšè¿°ã®ååšã¯ãããã€ã¹ã«ãããããä»»æã®ãŠãŒã¶ãŒã«å©çšå¯èœãªã¢ããã€ã¹ãè¡ãã
title屿§ã§ã®ãã¿ãŒã³èšè¿°ã®ååšã¯ãå ¥åããã©ãŒã«ã¹ãåããéã«ã¹ã¯ãªãŒã³ãªãŒããŒã®ãããªæ¯æŽæè¡ã«ãã£ãŠæ«é²ãããŠãã説æãšãªãã
ãŠãŒã¶ãŒã誀ã£ãæ å ±ã§ãã©ãŒã ãéä¿¡ããããšããå Žåãtitle屿§ã®ããã¹ãã®ååšããŸãããŠãŒã¶ãŒãšãŒãžã§ã³ãã«ä»¥äžã®ãããªèŠåã衚瀺ããããããããªãïŒ
A part number is a digit followed by three uppercase letters.
You cannot submit this form when the field is incorrect.
ãã®äŸã«ãããŠããã¿ãŒã³èšè¿°ã¯title屿§ã®ããã¹ãã§ãªããinputã®äžã®ããã¹ãã§ãããaria-describedby屿§ã¯ãæç€ºçã«ã³ã³ãããŒã«ãšèª¬æããã¹ããé¢é£ä»ããããã«äœ¿çšãããinputããã©ãŒã«ã¹ãåãåãéã«ã¹ã¯ãªãŒã³ãªãŒããŒãªã©ã®æ¯æŽæè¡ã«ãã£ãŠèª¬æã¯æ«é²ãããã
<label> Part number:
<input pattern="[0-9][A-Z]{3}" name="part" aria-describedby="description">
</label>
<p id="description">A part number is a digit followed by three uppercase letters.</p>
ã³ã³ãããŒã«ãpattern屿§ãæã€å Žåãtitleã䜿çšãããå Žåããã¿ãŒã³ãèšè¿°ããªããã°ãªããªããè¿œå æ
å ±ã¯ãŸããã³ã³ãããŒã«ã§åããéã«ãŠãŒã¶ãŒãæ¯æŽããéããå«ãŸãããããããªããããã§ãªããã°ãæ¯æŽæè¡ã¯åŒ±ããããã ããã
ããšãã°ãtitle屿§ãã³ã³ãããŒã«ã®ãã£ãã·ã§ã³ãå«ãã å Žåãæ¯æŽæè¡ã¯ãThe text you have entered does not match the required pattern. Birthdayãã§çµããããããããããã¯æçã§ã¯ãªãã
ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãšã©ãŒä»¥å€ã®ç¶æ³ã§ïŒããšãã°ãã³ã³ãããŒã«ã®äžã«ããŠã¹ãç§»åããŒã«ããããšããŠïŒtitleãäŸç¶ãšããŠè¡šç€ºããŠãããããããããšã©ãŒãå¿
ç¶çã«çºçããŠãããã®ããã«ãèè
ã¯titleãèšèã§è¡šãããšã®ãªãããæ³šæãã¹ãã§ããã
minããã³max屿§ãã©ãŒã ã³ã³ãããŒã«ã¯ããŠãŒã¶ãŒãæäŸã§ããå€ã®èš±å®¹ç¯å²ãå¶éããããšã«å¯ŸããŠæç€ºçãªå¶çŽãé©çšã§ãããéåžžããã®ãããªç¯å²ã¯ç·åœ¢ããã³é£ç¶ã ããããããããã©ãŒã ã³ã³ãããŒã«ã®æå€§éåºãç¯å²ãæéã§ããå Žåããã©ãŒã ã³ã³ãããŒã«ã¯å®æçãªãã¡ã€ã³ãæã€ããšãã§ãããã€èè ã¯å¢çã«ãŸãããããã®äžã§æç€ºçã«ç¯å²ãæå®ã§ããã
å
·äœçã«ãtype=timeå¶åŸ¡ã®åºãç¯å²ãæ·±å€ã®çå€äžïŒ24æéïŒã§ããããã€èè
ã¯äž¡æ¹ã®é£ç¶ç·åœ¢ç¯å²ïŒããšãã°ååŸ9æããååŸ11æãŸã§ãªã©ïŒãäžé£ç¶ãªç¯å²ã«ãããæ·±å€ïŒããšãã°ååŸ11æããåå1æãŸã§ãªã©ïŒãèšå®ã§ããã
minããã³max屿§ã¯ãèŠçŽ ã«å¯ŸããŠèš±å¯ãããç¯å²ã瀺ãã
Their syntax is defined by the section that defines the type attribute's current state.
If the element has a min attribute, and the result of
applying the algorithm to convert a string to a
number to the value of the min attribute is a number,
then that number is the element's minimum; otherwise, if the
type attribute's current state defines a default minimum, then that is the minimum; otherwise, the element has no minimum.
The min attribute also defines the step base.
If the element has a max attribute, and the result of
applying the algorithm to convert a string to a
number to the value of the max attribute is a number,
then that number is the element's maximum; otherwise, if the
type attribute's current state defines a default maximum, then that is the maximum; otherwise, the element has no maximum.
èŠçŽ ã宿çãªãã¡ã€ã³ãæããªãå Žåãmax屿§ã®å€ïŒæå€§å€ïŒã¯ãmin屿§ã®å€ïŒæå°å€ïŒæªæºã§ãã£ãŠã¯ãªããªãã
If an element that does not have a periodic domain has a maximum that is less than its minimum, then so long as the element has a value, it will either be suffering from an underflow or suffering from an overflow.
An element has a reversed range if it has a periodic domain and its maximum is less than its minimum.
èŠçŽ ãå®çŸ©ãããæå°å€ãŸãã¯å®çŸ©ãããæå€§å€ãæã€å ŽåãèŠçŽ ã¯ãç¯å²ã®å¶éãããã
Constraint validation: When the element has a minimum and does not have a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is less than the minimum, the element is suffering from an underflow.
Constraint validation: When the element has a maximum and does not have a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is more than the maximum, the element is suffering from an overflow.
Constraint validation: When an element has a reversed range, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and the number obtained from that algorithm is more than the maximum and less than the minimum, the element is simultaneously suffering from an underflow and suffering from an overflow.
æ¬¡ã®æ¥ä»ã³ã³ãããŒã«ã¯1980幎代以åã®æ¥ä»ãžã®å ¥åãå¶éããïŒ
<input name=bday type=date max="1979-12-31">
æ¬¡ã®æ°ã®ã³ã³ãããŒã«ã¯ããŒããã倧ããæŽæ°ãžã®å ¥åãå¶éããïŒ
<input name=quantity required="" type="number" min="1" value="1">
çå€äžã«ããã©ã«ãèšå®ã21æãš6æã®éã«çºçããåãžã®æé管çéçå ¥åïŒ
<input name="sleepStart" type=time min="21:00" max="06:00" step="60" value="00:00">
step屿§step屿§ã¯ãèš±å¯ãããå€ãå¶éããããšã«ãã£ãŠãå€ã®æåŸ
ãããïŒãããŠå¿
é ã®ïŒç²åºŠã瀺ããThe section that defines the type attribute's current state also defines the default step, the step scale factor, and in some cases the default step base, which are used in processing the attribute as described below.
step屿§ãæå®ãããå ŽåããŒããã倧ããæ°å€ã«è§£æããã劥åœãªæµ®åå°æ°ç¹æ°ã§ããå€ãæããªããã°ãªããªãããŸãã¯æåå"any"ãšASCII倧æåã»å°æåäžåºå¥ã§äžèŽããå€ã®ãããããæããªããã°ãªããªãã
The attribute provides the allowed value step for the element, as follows:
any", then there is no allowed
value step.The step base is the value returned by the following algorithm:
If the element has a min content attribute, and the
result of applying the algorithm to convert a
string to a number to the value of the min content
attribute is not an error, then return that result and abort these steps.
If the element has a value content attribute, and
the result of applying the algorithm to convert a
string to a number to the value of the value content
attribute is not an error, then return that result and abort these steps.
If a default step base is defined for
this element given its type attribute's state, then return
it and abort these steps.
Return zero.
Constraint validation: When the element has an allowed value step, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and that number subtracted from the step base is not an integral multiple of the allowed value step, the element is suffering from a step mismatch.
次ã®ç¯å²ã®å¶åŸ¡ã¯ãç¯å²0..1ã®å€ã®ã¿ãåãåãããã®ç¯å²å ã®256ã®ã¹ããããå¯èœã«ããïŒ
<input name=opacity type=range min=0 max=1 step=0.00392156863>
次ã®ã³ã³ãããŒã«ã¯ãä»»æã®ç²ŸåºŠïŒããšãã°1000åã®1ç§ç²ŸåºŠä»¥äžïŒã§ãããæ¥ã«ãããŠä»»æã®æéãéžæã§ããïŒ
<input name=favtime type=time step=any>
éåžžãæéã®ã³ã³ãããŒã«ã¯1åã®ç²ŸåºŠã«å¶éãããã
list屿§list屿§ã¯ããŠãŒã¶ãŒã«ææ¡æžã¿ãªãã·ã§ã³ã®äžèЧã瀺ãèŠçŽ ãèå¥ããããã«äœ¿çšãããã
ååšããå Žåããã®å€ã¯åãææžã§datalistèŠçŽ ã®IDã§ãªããã°ãªããªãã
The suggestions source element is the first element in
the document in tree order to have an ID equal to the
value of the list attribute, if that element is a
datalist element. If there is no list attribute,
or if there is no element with that ID, or if the first element
with that ID is not a datalist element, then there is
no suggestions source element.
If there is a suggestions source element, then, when
the user agent is allowing the user to edit the input element's value, the user agent should offer the suggestions represented by
the suggestions source element to the user in a manner
suitable for the type of control used. The user agent may use the suggestion's label to identify the suggestion if appropriate.
How user selections of suggestions are handled depends on whether the element is a control accepting a single value only, or whether it accepts multiple values:
multiple attribute
specified or if the multiple attribute does not
applyWhen the user selects a suggestion, the input element's value must be set to the selected suggestion's value, as if the user had written that value himself.
multiple
attribute specified, and the multiple attribute does
applyWhen the user selects a suggestion, the user agent must either add a new entry to the
input element's values, whose value
is the selected suggestion's value, or change an
existing entry in the input element's values to have the value given by the selected
suggestion's value, as if the user had himself added
an entry with that value, or edited an existing entry to be that value. Which behavior is to be
applied depends on the user interface in a user-agent-defined manner.
If the list attribute does not
apply, there is no suggestions source element.
ãã®URLãã£ãŒã«ãã¯ãããã€ãã®ææ¡ãæäŸããã
<label>Homepage: <input name=hp type=url list=hpurls></label> <datalist id=hpurls> <option value="http://www.google.com/" label="Google"> <option value="http://www.reddit.com/" label="Reddit"> </datalist>
ãŠãŒã¶ãŒã®å±¥æŽããä»ã®URLã衚瀺ãããããšãããããããã¯ãŠãŒã¶ãŒãšãŒãžã§ã³ãã«ä»»ãããã
ãã®äŸã¯ãã¬ã¬ã·ãŒãŠãŒã¶ãŒãšãŒãžã§ã³ãã§äŸç¶ãšããŠå£åãã€ã€æçšã§ãããèªåè£å®ãªã¹ãæ©èœã䜿çšãããã©ãŒã ãèšèšããæ¹æ³ã瀺ãã
èªåè£å®ãªã¹ãã¯åãªãæ¯æŽã§ãããã³ã³ãã³ãã«ãšã£ãŠéèŠã§ãªãå Žåãåã«åoptionèŠçŽ ãšãšãã«datalistèŠçŽ ã䜿çšããã°ååã§ãããã¬ã¬ã·ãŒãŠãŒã¶ãŒãšãŒãžã§ã³ãã§å€ãã¬ã³ããªã³ã°ãããŠãã®ã鲿¢ããããã«ããããã¯ãã€ã³ã©ã€ã³ã®ä»£ããã«value屿§ã®å
éšã«é
眮ããå¿
èŠãããã
<p> <label> Enter a breed: <input type="text" name="breed" list="breeds"> <datalist id="breeds"> <option value="Abyssinian"> <option value="Alpaca"> <!-- ... --> </datalist> </label> </p>
ãã ããå€ãã¬ã¬ã·ãŒãŠãŒã¶ãŒãšãŒãžã§ã³ãã§ç€ºãããå¿
èŠãããå Žåããã©ãŒã«ããã¯ã³ã³ãã³ãã¯ã次ã®ããã«datalistèŠçŽ å
ã«é
眮ã§ããïŒ
<p>
<label>
Enter a breed:
<input type="text" name="breed" list="breeds">
</label>
<datalist id="breeds">
<label>
or select one from the list:
<select name="breed">
<option value=""> (none selected)
<option>Abyssinian
<option>Alpaca
<!-- ... -->
</select>
</label>
</datalist>
</p>
ãã©ãŒã«ããã¯ã³ã³ãã³ãã¯ãdatalistããµããŒãããªããŠãŒã¶ãŒãšãŒãžã§ã³ãã§ã®ã¿è¡šç€ºããããäžæ¹ã§ãããããdatalistèŠçŽ ã®åã§ã¯ãªãã«ããããããããªãã·ã§ã³ã¯ãã¹ãŠã®ãŠãŒã¶ãŒãšãŒãžã§ã³ãã§æ€åºãããã
datalistã§äœ¿çšãããoptionèŠçŽ ãselectedã§ããå ŽåãèŠçŽ ã¯ïŒselectã«åœ±é¿ãäžããããïŒã¬ã¬ã·ãŒãŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠããã©ã«ãã§éžæãããããèŠçŽ ãdatalistããµããŒããããŠãŒã¶ãŒãšãŒãžã§ã³ãã§inputèŠçŽ ã«äœã®åœ±é¿ããªãããšã«æ³šæããã
placeholder屿§ã³ã³ãããŒã«ãå€ãæããªãå Žåãplaceholder屿§ã¯ãããŒã¿å
¥åã䌎ããŠãŒã¶ãŒã®æ¯æŽãæå³ããçããã³ãïŒåèªãçããã¬ãŒãºïŒã衚ãããã³ãã¯ããµã³ãã«å€ãŸãã¯æåŸ
ããã圢åŒã®ç°¡åãªèª¬æãããããªãã屿§ãæå®ãããå Žåã"LF"ïŒU+000AïŒãŸãã¯"CR"ïŒU+000DïŒæåãäžåå«ãŸãªãå€ãæããªããã°ãªããªãã
placeholder屿§ã¯ãlabelã®ä»£æ¿ãšããŠäœ¿çšãã¹ãã§ãªãããã³ããä»ã®å©èšããã¹ãã«ã€ããŠã¯ãã³ã³ãããŒã«ã®æ¬¡ã«ããã¹ãã眮ãã
labelã®ä»£æ¿ãšããŠã®placeholder屿§ã®äœ¿çšã¯ãé«éœ¢ãŠãŒã¶ãŒããã³èªç¥ãã¢ããªãã£ãŒã埮现ãªéåæèœãèŠèŠã«é害ãæã€ãŠãŒã¶ãŒãå«ãå¹
åºããŠãŒã¶ãŒã®ã³ã³ãããŒã«ã®ã¢ã¯ã»ã·ããªãã£ãŒããã³ãŠãŒã¶ãŒããªãã£ãŒãæžããããšããããã³ã³ãããŒã«ã®labelã«ãã£ãŠäžãããããã³ãã¯æ¯å衚瀺ãããäžæ¹ã§ãplaceholder屿§ã«äžããããçããã³ãã¯ããŠãŒã¶ãŒãå€ãå
¥åããåã«ã®ã¿è¡šç€ºããããããã«ãplaceholderããã¹ãã¯äºãåããããå€ãšééãããããããããäžè¬ã«å®è£
ããããã¬ãŒã¹ãã«ããŒããã¹ãã®ããã©ã«ãè²ãäžååãªã³ã³ãã©ã¹ããæäŸãããããŠå¥ã®å¯èŠlabelã®æ¬ åŠã¯ãã³ã³ãããŒã«ã®ãã©ãŒã«ã¹ãèšå®ããããã«å©çšå¯èœãªãããé åã®ãµã€ãºãå°ããããã
User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and the control is not focused (i.e., by displaying it inside a blank unfocused control).
ããã§placeholder屿§ã䜿çšããã¡ãŒã«èšå®ã®ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®äŸã¯æ¬¡ã®ãšããïŒ
<fieldset> <legend>Mail Account</legend> <p><label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger"></label></p> <p><label>Address: <input type="email" name="address" placeholder="john@example.net"></label></p> <p><label>Password: <input type="password" name="password"></label></p> <p><label>Description: <input type="text" name="desc" placeholder="My Email Account"></label></p> </fieldset>
ã³ã³ãããŒã«ã®ã³ã³ãã³ãã1ã€ã®æ¹åæ§ãæã€ãããã¬ãŒã¹ãã«ããŒã¯ç°ãªãæ¹åæ§ãæã€å¿ èŠãããç¶æ³ã«ãããŠãUnicodeã®åæ¹åã¢ã«ãŽãªãºã ã®æžåŒæåã¯å±æ§å€ã§äœ¿çšã§ããïŒ
<input name=t1 type=tel placeholder="‫âØ±Ù٠اÙÙØ§ØªÙ 1â‮"> <input name=t2 type=tel placeholder="‫âØ±Ù٠اÙÙØ§ØªÙ 2â‮">
ããå°ãããããããããããã«ãã€ã³ã©ã€ã³ã®ã¢ã©ãã¢èªã®ä»£ããã«æ°å€æååç §ã䜿çšããåãäŸã瀺ãïŒ
<input name=t1 type=tel placeholder="‫رقم الهاتف 1‮"> <input name=t2 type=tel placeholder="‫رقم الهاتف 2‮">
inputèŠçŽ APIvalue [ = value ]ãã©ãŒã ã³ã³ãããŒã«ã®çŸåšã®å€ãè¿ãã
å€ã倿Žããèšå®ãå¯èœã§ããã
ã³ã³ãããŒã«ããã¡ã€ã«ã¢ããããŒãã³ã³ãããŒã«ã§ããéã«ã空æåå以å€ã®ä»»æã®å€ã«èšå®ãããå ŽåãInvalidStateErroräŸå€ãæããã
checked [ = value ]ãã©ãŒã ã³ã³ãããŒã«ã®çŸåšcheckednessãè¿ãã
checkednessã倿Žããèšå®ãå¯èœã§ããã
files ãã©ãŒã ã³ã³ãããŒã«ã®éžæããããã¡ã€ã«ãåæããFileListãªããžã§ã¯ããè¿ãã
ã³ã³ãããŒã«ããã¡ã€ã«å¶åŸ¡ã§ãªãå Žåã¯nullãè¿ãã
valueAsDate [ = value ]該åœããå Žåããã©ãŒã ã®ã³ã³ãããŒã«ã®å€ã衚ãDateãªããžã§ã¯ããè¿ããããã§ãªããã°ãnullãè¿ãã
å€ã倿Žããèšå®ãå¯èœã§ããã
ã³ã³ãããŒã«ãæ¥ä»ãŸãã¯æéããŒã¹ã§ãªãå ŽåãInvalidStateErroräŸå€ãæããã
valueAsNumber [ = value ]該åœããå Žåããã©ãŒã ã®ã³ã³ãããŒã«ã®å€ãè¡šãæ°å€ãè¿ããããã§ãªããã°ãNaNãè¿ãã
å€ã倿Žããèšå®ãå¯èœã§ãããNaNã«ãããèšå®ãããšã空æååã®åºã«ãªãå€ãèšå®ããã
ã³ã³ãããŒã«ãæ¥ä»ãŸãã¯æéããŒã¹ã§ãæ°å€ã§ããªãå ŽåãInvalidStateErroräŸå€ãæããã
stepUp( [ n ] )stepDown( [ n ] )step屿§ã§æå®ãããå€ã«ãã£ãŠããã©ãŒã ã³ã³ãããŒã«ã®å€ãnåã«å€æŽãããnã®ããã©ã«ãå€ã¯1ã§ããã
ã³ã³ãããŒã«ãæ¥ä»ãŸãã¯æéããŒã¹ãŸãã¯æ°å€ã®ãããã§ããªãå ŽåããŸãã¯step屿§å€ã"any"ã§ããå ŽåãInvalidStateErroräŸå€ãæããã
listlist屿§ã«ãã£ãŠç€ºãããdatalistèŠçŽ ãè¿ãã
The value IDL attribute allows scripts to
manipulate the value of an input element. The
attribute is in one of the following modes, which define its behavior:
On getting, it must return the current value of the
element. On setting, it must set the element's value to
the new value, set the element's dirty value
flag to true, invoke the value sanitization algorithm, if the element's
type attribute's current state defines one, and then, if
the element has a text entry cursor position, should move the text entry cursor position to the
end of the text field, unselecting any selected text and resetting the selection direction to
none.
On getting, if the element has a value attribute, it
must return that attribute's value; otherwise, it must return the empty string. On setting, it
must set the element's value attribute to the new
value.
On getting, if the element has a value attribute, it
must return that attribute's value; otherwise, it must return the string "on". On setting, it must set the element's value attribute to the new value.
On getting, it must return the string "C:\fakepath\" followed by the
name of the first file in the list of selected
files, if any, or the empty string if the list is empty. On setting, if the new value is
the empty string, it must empty the list of selected files; otherwise, it must throw an
InvalidStateError exception.
This "fakepath" requirement is a sad accident of history. See the example in the File Upload state section for more information.
The checked IDL attribute allows scripts to
manipulate the checkedness of an input
element. On getting, it must return the current checkedness of the element; and on setting, it must set the
element's checkedness to the new value and set the
element's dirty checkedness flag to
true.
The files IDL attribute allows scripts to
access the element's selected files. On
getting, if the IDL attribute applies, it must return a
FileList object that represents the current selected files. The same object must be returned
until the list of selected files changes. If
the IDL attribute does not apply, then it must instead return
null. [FILEAPI]
The valueAsDate IDL attribute represents
the value of the element, interpreted as a date.
On getting, if the valueAsDate attribute does not apply, as defined for the input element's type attribute's current state, then return null. Otherwise, run
the algorithm to convert a string to a
Date object defined for that state; if the algorithm returned a
Date object, then return it, otherwise, return null.
On setting, if the valueAsDate attribute does not apply, as defined for the input element's type attribute's current state, then throw an
InvalidStateError exception; otherwise, if the new value is null or a
Date object representing the NaN time value, then set the value of the element to the empty string; otherwise, run the algorithm to convert a Date object to a
string, as defined for that state, on the new value, and set the value of the element to the resulting string.
The valueAsNumber IDL attribute
represents the value of the element, interpreted as a
number.
On getting, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then return a Not-a-Number (NaN)
value. Otherwise, if the valueAsDate attribute
applies, run the algorithm to convert a string to a Date
object defined for that state; if the algorithm returned a Date object, then
return the time value of the object (the number of milliseconds from midnight UTC the
morning of 1970-01-01 to the time represented by the Date object), otherwise, return
a Not-a-Number (NaN) value. Otherwise, run the algorithm to convert a string to a number defined
for that state; if the algorithm returned a number, then return it, otherwise, return a
Not-a-Number (NaN) value.
On setting, if the new value is infinite, then throw a TypeError exception.
Otherwise, if the valueAsNumber attribute does not apply, as defined for the input element's type attribute's current state, then throw an
InvalidStateError exception. Otherwise, if the new value is a Not-a-Number (NaN)
value, then set the value of the element to the empty
string. Otherwise, if the valueAsDate
attribute applies, run the algorithm to convert a Date object to a
string defined for that state, passing it a Date object whose time
value is the new value, and set the value of the element
to the resulting string. Otherwise, run the algorithm to convert a number to a string, as
defined for that state, on the new value, and set the value
of the element to the resulting string.
The stepDown(n) and stepUp(n) methods, when invoked,
must run the following algorithm:
If the stepDown() and stepUp() methods do not apply, as defined for the
input element's type attribute's current state,
then throw an InvalidStateError exception, and abort these steps.
If the element has no allowed value step, then
throw an InvalidStateError exception, and abort these steps.
If the element has a minimum and a maximum and the minimum is greater than the maximum, then abort these steps.
If the element has a minimum and a maximum and there is no value greater than or equal to the element's minimum and less than or equal to the element's maximum that, when subtracted from the step base, is an integral multiple of the allowed value step, then abort these steps.
If applying the algorithm to convert a string to a number to the string given by the element's value does not result in an error, then let value be the result of that algorithm. Otherwise, let value be zero.
If value subtracted from the step
base is not an integral multiple of the allowed value
step, then set value to the nearest value that, when subtracted from
the step base, is an integral multiple of the allowed value step, and that is less than value if the method invoked was the stepDown() and more than value
otherwise.
Otherwise (value subtracted from the step base is an integral multiple of the allowed value step), run the following substeps:
Let n be the argument.
Let delta be the allowed value step multiplied by n.
If the method invoked was the stepDown() method,
negate delta.
Let value be the result of adding delta to value.
If the element has a minimum, and value is less than that minimum, then set value to the smallest value that, when subtracted from the step base, is an integral multiple of the allowed value step, and that is more than or equal to minimum.
If the element has a maximum, and value is greater than that maximum, then set value to the largest value that, when subtracted from the step base, is an integral multiple of the allowed value step, and that is less than or equal to maximum.
Let value as string be the result of running the algorithm to convert a number to a string, as
defined for the input element's type
attribute's current state, on value.
Set the value of the element to value as string.
The list IDL attribute must return the current
suggestions source element, if any, or null otherwise.
When the input and change
events apply (which is the case for all
input controls other than buttons and those with
the type attribute in the Hidden state), the events are fired to indicate that the
user has interacted with the control. The input
event fires whenever the user has modified the data of the control. The change event fires when the value is committed, if
that makes sense for the control, or else when the control loses focus. In all cases, the input event comes before the corresponding change event (if any).
When an input element has a defined activation behavior, the rules
for dispatching these events, if they apply, are given
in the section above that defines the type attribute's
state. (This is the case for all input controls with the type attribute in the Checkbox state, the Radio Button state, or the File Upload state.)
For input elements without a defined activation behavior, but to
which these events apply, and for which the user
interface involves both interactive manipulation and an explicit commit action, then when the user
changes the element's value, the user agent must
queue a task to fire a simple event that bubbles named input at the input element, and any time the user commits
the change, the user agent must queue a task to fire a simple event that
bubbles named change at the input element.
An example of a user interface involving both interactive manipulation and a
commit action would be a Range controls that use a
slider, when manipulated using a pointing device. While the user is dragging the control's knob,
input events would fire whenever the position changed, whereas
the change event would only fire when the user let go of the
knob, committing to a specific value.
For input elements without a defined activation behavior, but to
which these events apply, and for which the user
interface involves an explicit commit action but no intermediate manipulation, then any time the
user commits a change to the element's value, the user
agent must queue a task to first fire a simple event that bubbles named
input at the input element, and then fire a
simple event that bubbles named change at the
input element.
An example of a user interface with a commit action would be a Color control that consists of a single button that brings up a color wheel: if the value only changes when the dialog is closed, then that would be the explicit commit action. On the other hand, if the control can be focused and manipulating the control changes the color interactively, then there might be no commit action.
Another example of a user interface with a commit action would be a Date control that allows both text-based user input and user selection from a drop-down calendar: while text input might not have an explicit commit step, selecting a date from the drop down calendar and then dismissing the drop down would be a commit action.
For input elements without a defined activation behavior, but to
which these events apply, any time the user causes the
element's value to change without an explicit commit
action, the user agent must queue a task to fire a simple event that
bubbles named input at the input element. The
corresponding change event, if any, will be fired when the
control loses focus.
Examples of a user changing the element's value would include the user typing into a text field, pasting a new value into the field, or undoing an edit in that field. Some user interactions do not cause changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text in the field with text from the clipboard that happens to be exactly the same text.
A Range control in the form of a slider that the user has focused and is interacting with using a keyboard would be another example of the user changing the element's value without a commit step.
In the case of tasks that just fire an input event, user agents may wait for a suitable break in the user's
interaction before queuing the tasks; for example, a user agent
could wait for the user to have not hit a key for 100ms, so as to only fire the event when the
user pauses, instead of continuously for each keystroke.
When the user agent is to change an input element's value on behalf of the user (e.g. as part of a form prefilling
feature), the user agent must queue a task to first update the value accordingly, then fire a simple event that
bubbles named input at the input element, then
fire a simple event that bubbles named change at
the input element.
These events are not fired in response to changes made to the values of form controls by scripts. (This is to make it easier to update the values of form controls in response to the user manipulating the controls, without having to then filter out the script's own changes to avoid an infinite loop.)
The task source for these tasks is the user interaction task source.
buttonèŠçŽ autofocus - ããŒãžãèªã¿èŸŒãŸããéã«ãã©ãŒã ã³ã³ãããŒã«ã«èªåçã«ãã©ãŒã«ã¹ããdisabled - ãã©ãŒã ã³ã³ãããŒã«ãç¡å¹ã§ãããã©ããform - formèŠçŽ ãšã³ã³ãããŒã«ãé¢é£ä»ããformaction - ãã©ãŒã éä¿¡ã«äœ¿çšããURLformenctype - ãã©ãŒã éä¿¡ã«äœ¿çšããæåãšã³ã³ãŒãã£ã³ã°ãèšå®ãããã©ãŒã ããŒã¿formmethod - ãã©ãŒã éä¿¡ã«äœ¿çšããHTTPã¡ãœããformnovalidate - ãã©ãŒã éä¿¡ã®ããã®ãã©ãŒã ã³ã³ãããŒã«æ€èšŒãåé¿ããformtarget - ãã©ãŒã éä¿¡ã«å¯Ÿãããã©ãŠãžã³ã°ã³ã³ããã¹ãmenu - èŠçŽ ã®æå®ããããããã¢ããã¡ãã¥ãŒãæå®ããname - ãã©ãŒã éä¿¡ããã³form.elements APIã§äœ¿çšãããã©ãŒã ã³ã³ãããŒã«å type - ãã¿ã³ã®çš®é¡value - ãã©ãŒã éä¿¡ã«å¯ŸããŠäœ¿çšãããå€button ïŒããã©ã«ã - èšå®ããªãïŒãlinkãmenuitemãmenuitemcheckboxãmenuitemradioãŸãã¯radioãaria-*屿§ãinterface HTMLButtonElement : HTMLElement {
attribute boolean autofocus;
attribute boolean disabled;
readonly attribute HTMLFormElement? form;
attribute DOMString formAction;
attribute DOMString formEnctype;
attribute DOMString formMethod;
attribute boolean formNoValidate;
attribute DOMString formTarget;
attribute DOMString name;
attribute DOMString type;
attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(DOMString error);
readonly attribute NodeList labels;
};
buttonèŠçŽ ã¯èŠçŽ ã®ã³ã³ãã³ãã«ãã£ãŠåé¡ããããã¿ã³ã衚ãã
èŠçŽ ã¯ãã¿ã³ã§ããã
type屿§ã¯ãã¢ã¯ãã£ãæã®ãã¿ã³ã®æ¯ãèããå¶åŸ¡ããããã®å±æ§ã¯åæå±æ§ã§ãããæ¬¡ã®è¡šã¯ãããŒã¯ãŒããšå±æ§ã®ç¶æ
ã瀺ãã1åç®ã®ããŒã¯ãŒãã¯ãããŒã¯ãŒããšåãè¡ã§2åç®ã®ã»ã«å
ã®ç¶æ
ã«å¯Ÿå¿ã¥ããã
| ããŒã¯ãŒã | ç¶æ | æŠèŠ |
|---|---|---|
submit
| Submit Button | ãã©ãŒã ãéä¿¡ããã |
reset
| Reset Button | ãã©ãŒã ããªã»ããããã |
button
| Button | äœãããªãã |
æ¬ æå€ã®ããã©ã«ãã¯ãSubmit Buttonç¶æ ã§ããã
type屿§ãSubmit Buttonç¶æ
ã«ããå ŽåãèŠçŽ ã¯å
·äœçã«submit buttonã§ããã
Constraint validation: If the type
attribute is in the Reset Button state, or the
Button state, the element is barred from constraint
validation.
When a button element is not disabled,
its activation behavior element is to run the steps defined in the following list for
the current state of the element's type attribute:
If the element has a form owner and the element's Document is
fully active, the element must submit the
form owner from the button element.
If the element has a form owner and the element's Document is
fully active, the element must reset the
form owner.
äœãããªãã
form屿§ã¯ããã©ãŒã ã®ææè
ãšbuttonèŠçŽ ãæç€ºçã«é¢é£ä»ããããã«äœ¿çšããããname屿§ã¯èŠçŽ ã®ååã衚ããdisabled屿§ã¯ãã³ã³ãããŒã«ãéã€ã³ã¿ã©ã¯ãã£ãã«ããããããã³ãã®å€ãéä¿¡ããã®ãé²ãããã«äœ¿çšããããautofocus屿§ã¯ãã©ãŒã«ã¹ãå¶åŸ¡ãããformactionãformenctypeãformmethodãformnovalidateãformtarget屿§ã¯ããã©ãŒã éä¿¡çšã®å±æ§ã§ããã
formnovalidate屿§ã¯ãå¶çŽæ€èšŒãããªã¬ãŒããªãéä¿¡ãã¿ã³ãäœæããããã«äœ¿çšã§ããã
èŠçŽ ã®type屿§ãSubmit Buttonç¶æ
ã§ãªãå Žåãformactionãformenctypeãformmethodãformnovalidateãformtargetã¯æå®ãããŠã¯ãªããªãã
value屿§ã¯ãã©ãŒã éä¿¡ã®ç®çã®ããã«èŠçŽ ã®å€ãäžãããååšããå ŽåãèŠçŽ ã®å€ã¯èŠçŽ ã®value屿§ã®å€ã§ãããããã§ãªããã°ç©ºæååã§ããã
ãã¿ã³èªäœããã©ãŒã ã®éä¿¡ãéå§ããããã«äœ¿çšãããå Žåããã¿ã³ïŒããã³ãã®å€ïŒã¯ãã©ãŒã ã®éä¿¡ã«ã®ã¿å«ãŸããã
typeIDL屿§ã¯ãæ¢ç¥ã®å€ã«å¶éãããåãååã®ã³ã³ãã³ã屿§ãåæ ããªããã°ãªããªãã
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), and setCustomValidity() methods, are part of the constraint validation API. labelsIDL屿§ã¯ã èŠçŽ ã®labelã®ãªã¹ããæäŸãããautofocusãdisabledãformãããã³nameIDL屿§ã¯èŠçŽ ã®ãã©ãŒã APIã®äžéšã§ããã
次ã®ãã¿ã³ã¯ãã¢ã¯ãã£ãæã«ã"Show hint"ã®ã©ãã«ããã¡ããã€ã¢ãã°ããã¯ã¹ããããã¢ãã衚瀺ãããïŒ
<button type=button
onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
Show hint
</button>
selectèŠçŽ optionãoptgroupãããã³ã¹ã¯ãªãããµããŒãèŠçŽ ãautofocus - ããŒãžãèªã¿èŸŒãŸããéã«ãã©ãŒã ã³ã³ãããŒã«ã«èªåçã«ãã©ãŒã«ã¹ããdisabled - ãã©ãŒã ã³ã³ãããŒã«ãç¡å¹ã§ãããã©ããform - formèŠçŽ ãšã³ã³ãããŒã«ãé¢é£ä»ããmultiple - è€æ°ã®å€ãèš±å¯ãããã©ããname - ãã©ãŒã éä¿¡ããã³form.elements APIã§äœ¿çšãããã©ãŒã ã³ã³ãããŒã«å required - ã³ã³ãããŒã«ããã©ãŒã éä¿¡ã«èŠæ±ããããã©ããsize - ã³ã³ãããŒã«ã®ãµã€ãºlistboxïŒããã©ã«ã - èšå®ããªãïŒãŸãã¯menuãaria-*屿§ãinterface HTMLSelectElement : HTMLElement {
attribute boolean autofocus;
attribute boolean disabled;
readonly attribute HTMLFormElement? form;
attribute boolean multiple;
attribute DOMString name;
attribute boolean required;
attribute unsigned long size;
readonly attribute DOMString type;
readonly attribute HTMLOptionsCollection options;
attribute unsigned long length;
getter Element? item(unsigned long index);
HTMLOptionElement? namedItem(DOMString name);
void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
void remove(); // ChildNode overload
void remove(long index);
setter creator void (unsigned long index, HTMLOptionElement? option);
readonly attribute HTMLCollection selectedOptions;
attribute long selectedIndex;
attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(DOMString error);
readonly attribute NodeList labels;
};
selectèŠçŽ ã¯ããªãã·ã§ã³äžåŒã®äžã§éžæããããã®ã³ã³ãããŒã«ã衚ãã
multiple屿§ã¯çåœå±æ§ã§ããã屿§ãååšããå ŽåãselectèŠçŽ ã¯ããªãã·ã§ã³ã®ãªã¹ããã0å以äžã®ãªãã·ã§ã³ãéžæããããã®ã³ã³ãããŒã«ã衚ãã屿§ãååšããªãå ŽåãselectèŠçŽ ã¯ããªãã·ã§ã³ã®ãªã¹ããã1ã€ã®ãªãã·ã§ã³ãéžæããããã®ã³ã³ãããŒã«ã衚ãã
size屿§ã¯ããŠãŒã¶ãŒã«è¡šç€ºããããã®ãªãã·ã§ã³ã®æ°ãäžãããsize屿§ãæå®ãããå Žåã0ãã倧ãã劥åœãªè² ã§ãªãæŽæ°ã§ããå€ãæããªããã°ãªããªãã
The display size of a select element is the
result of applying the rules for parsing non-negative integers to the value of
element's size attribute, if it has one and parsing it is
successful. If applying those rules to the attribute's value is not successful, or if the size attribute is absent, then the element's display size is 4 if the element's multiple content attribute is present, and 1 otherwise.
selectèŠçŽ ã®ãªãã·ã§ã³ã®ãªã¹ãã¯ãããªãŒé ã§ãselectèŠçŽ ã®ãã¹ãŠã®optionåèŠçŽ ãããã³selectèŠçŽ ã®ãã¹ãŠã®optgroupèŠçŽ ã«å±ãããã¹ãŠã®optionåèŠçŽ ã§æ§æãããã
required屿§ã¯çåœå±æ§ã§ãããæå®ãããå ŽåããŠãŒã¶ãŒããã©ãŒã ãéä¿¡ããåã«å€ãéžæããå¿
èŠãããã
selectèŠçŽ ãrequired屿§ãæå®ãããmultiple屿§ãæå®ãããã1ã§ãã衚瀺ãµã€ãºãæã€å Žåãããã³ïŒããããã°ïŒselectèŠçŽ ã®ãªãã·ã§ã³ã®ãªã¹ãã§æåã®optionã®å€ã空æååã§ããããã®optionèŠçŽ ã®èŠªããŒããselectèŠçŽ ïŒãã€optgroupèŠçŽ ã§ãªãïŒå Žåããã®optionã¯ãselectèŠçŽ ã®ãã¬ãŒã¹ãã«ããŒã®ã©ãã«ãªãã·ã§ã³ã§ããã
selectèŠçŽ ãrequired屿§ãæå®ãããmultiple屿§ãæå®ãããã1ã§ãã衚瀺ãµã€ãºãæã€å Žåããã®selectèŠçŽ ã¯ããã¬ãŒã¹ãã«ããŒã®ã©ãã«ãªãã·ã§ã³ãæããªããã°ãªããªãã
Constraint validation: If the element has its required attribute specified, and either none of the
option elements in the select element's list of options have their selectedness set to true, or the only
option element in the select element's list of options with its selectedness set to true is the placeholder label
option, then the element is suffering from being missing.
If the multiple attribute is absent, and the element
is not disabled, then the user agent should allow the
user to pick an option element in its list
of options that is itself not disabled. Upon
this option element being picked (either
through a click, or through unfocusing the element after changing its value,
or through any other mechanism), and before the
relevant user interaction event is queued (e.g. before the
click event), the user agent must set the selectedness of the picked option element
to true, set its dirtiness to true, and then
send select update notifications.
If the multiple attribute is absent, whenever an
option element in the select element's list of options has its selectedness set to true, and whenever an
option element with its selectedness
set to true is added to the select element's list of options, the user agent must set the selectedness of all the other option
elements in its list of options to false.
If the multiple attribute is absent and the element's
display size is greater than 1, then the user agent
should also allow the user to request that the option whose selectedness is true, if any, be unselected. Upon this
request being conveyed to the user agent, and before the relevant user interaction event is queued (e.g. before the click
event), the user agent must set the selectedness
of that option element to false, set its dirtiness to true, and then send
select update notifications.
If nodes are inserted or nodes are removed causing the list of options to gain or lose one or more
option elements, or if an option element in the list of options asks for a
reset, then, if the select element's multiple attribute is absent, the select
element's display size is 1, and no option
elements in the select element's list of
options have their selectedness set to
true, the user agent must set the selectedness of
the first option element in the list of
options in tree order that is not disabled, if any, to true.
If the multiple attribute is present, and the element
is not disabled, then the user agent should allow the
user to toggle the selectedness of the option elements in its
list of options that are themselves not disabled. Upon such an element being toggled (either through a click,
or any other mechanism), and before the relevant user interaction event is queued (e.g. before a related click event), the selectedness of the option
element must be changed (from true to false or false to true), the dirtiness of the element must be set to true, and the
user agent must send select update notifications.
When the user agent is to send select update notifications, queue
a task to first fire a simple event that bubbles named input at the select element, and then fire a simple
event that bubbles named change at the
select element, using the user interaction task source as the task
source.
The reset algorithm for select
elements is to go through all the option elements in the element's list of options, set their selectedness to true if the option element
has a selected attribute, and false otherwise, set their dirtiness to false, and then
have the option elements ask for a reset.
form屿§ã¯ããã©ãŒã ã®ææè
ãšselectèŠçŽ ãæç€ºçã«é¢é£ä»ããããã«äœ¿çšããããname屿§ã¯èŠçŽ ã®ååã衚ããdisabled屿§ã¯ãã³ã³ãããŒã«ãéã€ã³ã¿ã©ã¯ãã£ãã«ããããããã³ãã®å€ãéä¿¡ããã®ãé²ãããã«äœ¿çšããããautofocus屿§ã¯ãã©ãŒã«ã¹ãå¶åŸ¡ããã
disabledã§ãªãselectèŠçŽ ã¯mutableã§ããã
typeèŠçŽ ãmultiple屿§ãæã€å Žåã"select-multiple"ãè¿ããããã§ãªããã°"select-one"ãè¿ãã
optionsãªãã·ã§ã³ã®ãªã¹ãã®HTMLOptionsCollectionãè¿ãã
length [ = value ]ãªãã·ã§ã³ã®ãªã¹ãã®èŠçŽ æ°ãè¿ãã
ããå°ããæ°ã«èšå®ããå Žåãselectã§ã®optionèŠçŽ æ°ã¯åãæšãŠãããã
ãã倧ããæ°ã«èšå®ããå Žåãselectã«æ°ãã空çœã®optionèŠçŽ ã远å ããã
item(index)ãªãã·ã§ã³ã®ãªã¹ãããã®ã€ã³ããã¯ã¹indexãšãšãã«ã¢ã€ãã ãè¿ããã¢ã€ãã ã¯ããªãŒé ã«ãœãŒããããã
namedItem(name)ãªãã·ã§ã³ã®ãªã¹ãããã®IDãŸãã¯name nameãšãšãã«æåã®ã¢ã€ãã ãè¿ãã
IDããã€èŠçŽ ãèŠã€ãããªãå Žåãnullãè¿ãã
add(element [, before ])beforeã«ãã£ãŠäžããããããŒãã®åã®èŠçŽ ãæ¿å ¥ããã
beforeåŒæ°ã¯æ°åã§ãããããã®å Žåelementã¯ãã®æ°åããã€ã¢ã€ãã ã®åã«æ¿å ¥ããããŸãã¯ãªãã·ã§ã³ã®ãªã¹ãããã®èŠçŽ ã§ãããããã®å Žåelementã¯ãã®èŠçŽ ã®åã«æ¿å ¥ãããã
beforeãçç¥ããããnullããŸãã¯ç¯å²å€ã®æ°åã®å Žåãelementã¯ãªã¹ãã®æåŸã«å ããããã ããã
èŠçŽ ã«æ¿å
¥ãããèŠçŽ ã芪èŠçŽ ã®å Žåããã®ã¡ãœããã¯HierarchyRequestErroräŸå€ãæããã ããã
selectedOptionséžæããããªãã·ã§ã³ã®ãªã¹ãã®HTMLOptionsCollectionãè¿ãã
selectedIndex [ = value ]ãããããªãã°ãæåã«éžã°ããã¢ã€ãã ã®ã€ã³ããã¯ã¹ãããŸãã¯éžæããã¢ã€ãã ãååšããªãå Žåâ1ãè¿ãã
éžæã倿Žããèšå®ãå¯èœã§ããã
value [ = value ]ããããã°ãæåã«éžæãããã¢ã€ãã ã®å€ãè¿ããéžæãããã¢ã€ãã ãååšããªãå Žåã空æååãè¿ãã
éžæã倿Žããèšå®ãå¯èœã§ããã
The type IDL attribute, on getting, must return
the string "select-one" if the multiple attribute is absent, and the string "select-multiple" if the multiple
attribute is present.
The options IDL attribute must return an
HTMLOptionsCollection rooted at the select node, whose filter matches
the elements in the list of options.
The options collection is also mirrored on the
HTMLSelectElement object. The supported property indices at any instant
are the indices supported by the object returned by the options attribute at that instant.
The length IDL attribute must return the
number of nodes represented by the options collection. On setting, it must act like the attribute
of the same name on the options collection.
The item(index) method must
return the value returned by the method of the same
name on the options collection, when invoked with
the same argument.
The namedItem(name)
method must return the value returned by the
method of the same name on the options collection,
when invoked with the same argument.
When the user agent is to set the value of a new
indexed property for a given property index index to a new value value, it must instead set the value
of a new indexed property with the given property index index to the
new value value on the options
collection.
Similarly, the add() method must act like its
namesake method on that same options collection.
The remove() method must act like its
namesake method on that same options collection when it
has arguments, and like its namesake method on the ChildNode interface implemented by
the HTMLSelectElement ancestor interface Element when it has no
arguments.
The selectedOptions IDL attribute
must return an HTMLCollection rooted at the select node, whose filter
matches the elements in the list of options that
have their selectedness set to true.
The selectedIndex IDL attribute, on
getting, must return the index of the first
option element in the list of options
in tree order that has its selectedness set to true, if any. If there isn't one,
then it must return â1.
On setting, the selectedIndex attribute must set
the selectedness of all the option
elements in the list of options to false, and then
the option element in the list of
options whose index is the given new value, if
any, must have its selectedness set to true and its dirtiness set to true.
This can result in no element having a selectedness set to true even in the case of the
select element having no multiple attribute
and a display size of 1.
The value IDL attribute, on getting, must
return the value of the first option
element in the list of options in tree
order that has its selectedness set to
true, if any. If there isn't one, then it must return the empty string.
On setting, the value attribute must set the selectedness of all the option elements in
the list of options to false, and then the first
option element in the list of
options, in tree order, whose value
is equal to the given new value, if any, must have its selectedness set to true and its dirtiness set to true.
This can result in no element having a selectedness set to true even in the case of the
select element having no multiple attribute
and a display size of 1.
The multiple, required, and size IDL attributes must reflect the
respective content attributes of the same name. The size IDL
attribute has a default value of zero.
For historical reasons, the default value of the size IDL attribute does not return the actual size used, which, in
the absence of the size content attribute, is either 1 or 4
depending on the presence of the multiple attribute.
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), and setCustomValidity() methods, are part of the constraint validation API. labelsIDL屿§ã¯ã èŠçŽ ã®labelã®ãªã¹ããæäŸãããautofocusãdisabledãformãããã³nameIDL屿§ã¯èŠçŽ ã®ãã©ãŒã APIã®äžéšã§ããã
ãªãã·ã§ã³ã®ã»ãããããŠãŒã¶ãŒã1ã€ã®ãªãã·ã§ã³ãéžæã§ããselectèŠçŽ ã䜿çšãããæ§åãæ¬¡ã«ç€ºããããã©ã«ãã®ãªãã·ã§ã³ã¯ãããããéžæãããŠããã
<p> <label for="unittype">Select unit type:</label> <select id="unittype" name="unittype"> <option value="1"> Miner </option> <option value="2"> Puffer </option> <option value="3" selected> Snipey </option> <option value="4"> Max </option> <option value="5"> Firebot </option> </select> </p>
ããã©ã«ãã®ãªãã·ã§ã³ãååšããªãå Žåããã¬ãŒã¹ãã«ããŒã代ããã«äœ¿çšãããïŒ
<select name="unittype" required> <option value=""> Select unit type </option> <option value="1"> Miner </option> <option value="2"> Puffer </option> <option value="3"> Snipey </option> <option value="4"> Max </option> <option value="5"> Firebot </option> </select>
ããã§ã¯ããŠãŒã¶ãŒããªãã·ã§ã³ã®ã»ããããä»»æã®æ°ãéžæã§ãããããã©ã«ãã§ã5ã€ãã¹ãŠã®ãªãã·ã§ã³ãéžæãããŠããã
<p> <label for="allowedunits">Select unit types to enable on this map:</label> <select id="allowedunits" name="allowedunits" multiple> <option value="1" selected> Miner </option> <option value="2" selected> Puffer </option> <option value="3" selected> Snipey </option> <option value="4" selected> Max </option> <option value="5" selected> Firebot </option> </select> </p>
ãšãã«ã¯ããŠãŒã¶ãŒã¯1ã€ä»¥äžã®é ç®ãéžæããå¿ èŠããããæ¬¡ã®äŸã¯ãã®ãããªã€ã³ã¿ãŒãã§ãŒã¹ã瀺ãã
<p>Select the songs from that you would like on your Act II Mix Tape:</p> <select multiple required name="act2"> <option value="s1">It Sucks to Be Me (Reprise) <option value="s2">There is Life Outside Your Apartment <option value="s3">The More You Ruv Someone <option value="s4">Schadenfreude <option value="s5">I Wish I Could Go Back to College <option value="s6">The Money Song <option value="s7">School for Monsters <option value="s8">The Money Song (Reprise) <option value="s9">There's a Fine, Fine Line (Reprise) <option value="s10">What Do You Do With a B.A. in English? (Reprise) <option value="s11">For Now </select>
datalistèŠçŽ optionèŠçŽ åå«ããã€ïŒãã¬ãŒãžã³ã°ã³ã³ãã³ããoptionèŠçŽ ãlistbox ïŒããã©ã«ã - èšå®ããªãïŒãaria-*屿§ãinterface HTMLDataListElement : HTMLElement {
readonly attribute HTMLCollection options;
};
datalistèŠçŽ ã¯ãä»ã®ã³ã³ãããŒã«çšã«ãããããå®çŸ©ããããªãã·ã§ã³ã衚ãoptionèŠçŽ ã®ã»ããã衚ããIn the rendering, the datalist element represents nothing and it, along with its children, should be hidden.
datalistèŠçŽ ã¯2ã€ã®æ¹æ³ã§äœ¿çšããããæãåçŽãªå ŽåãdatalistèŠçŽ ã¯optionèŠçŽ ã®åã®ã¿ãæã€ã
<label> Sex: <input name=sex list=sexes> <datalist id=sexes> <option value="Female"> <option value="Male"> </datalist> </label>
ããæã®èŸŒãã å ŽåãdatalistèŠçŽ ã¯datalistããµããŒãããªãããŠã³ã¬ãã«ã¯ã©ã€ã¢ã³ãã«å¯ŸããŠè¡šç€ºãããã³ã³ãã³ããäžããããããã®å ŽåãoptionèŠçŽ ã¯datalistèŠçŽ ã®å
åŽã®selectèŠçŽ ã®å
åŽã§æäŸãããã
<label> Sex: <input name=sex list=sexes> </label> <datalist id=sexes> <label> or select from the list: <select name=sex> <option value=""> <option>Female <option>Male </select> </label> </datalist>
datalistèŠçŽ ã¯inputèŠçŽ ã§list屿§ã䜿çšããinputèŠçŽ ã«æ¥ç¶ãããã
ãã®å€ã空æååã§ãªãæååã§ãããç¡å¹ã§ãªããdatalistèŠçŽ ã®åå«ã§ããåoptionèŠçŽ ã¯ãææ¡ã衚ããåææ¡ã¯ãå€ãšã©ãã«ãæã€ã
optionsdatalistã®optionsèŠçŽ ã®HTMLCollectionãè¿ãã
The options IDL attribute must return an
HTMLCollection rooted at the datalist node, whose filter matches
option elements.
Constraint validation: If an element has a datalist element
ancestor, it is barred from constraint validation.
optgroupèŠçŽ selectèŠçŽ ã®åãšããŠãoptionããã³ã¹ã¯ãªãããµããŒãèŠçŽ ãdisabled - ãã©ãŒã ã³ã³ãããŒã«ãç¡å¹ã§ãããã©ããlabel - ãŠãŒã¶ãŒå¯èŠã©ãã«optgroup element's end tag may be omitted
if the optgroup element is
immediately followed by another optgroup element, or if there is no more content in
the parent element.interface HTMLOptGroupElement : HTMLElement {
attribute boolean disabled;
attribute DOMString label;
};
optgroupèŠçŽ ã¯ãå
±éã®ã©ãã«ããã€optionèŠçŽ ã®ã°ã«ãŒãã衚ãã
optionèŠçŽ ã®èŠçŽ ã®ã°ã«ãŒãã¯ãoptgroupèŠçŽ ã®åã§ããoptionèŠçŽ ã§æ§æããã
When showing option elements in select elements, user agents should
show the option elements of such groups as being related to each other and separate
from other option elements.
disabled屿§ã¯çåœå±æ§ã§ãããäžç·ã«optionèŠçŽ ã®ã°ã«ãŒããç¡å¹ã«ããããã«äœ¿çšã§ããã
label屿§ãæå®ããªããã°ãªããªãããã®å€ã¯ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®ç®çã«å¯ŸããŠãã°ã«ãŒãã®ååãäžãããUser agents should use this attribute's value when labeling the group of option elements in a select element.
The disabled and label attributes must reflect the
respective content attributes of the same name.
æ¬¡ã®æçã¯ãselectããããããŠã³ãŠã£ãžã§ããã§3ã€ã®ã³ãŒã¹ããã¬ãã¹ã³ã®ã»ãããæäŸãããæ§åã瀺ãïŒ
<form action="courseselector.dll" method="get">
<p>Which course would you like to watch today?
<p><label>Course:
<select name="c">
<optgroup label="8.01 Physics I: Classical Mechanics">
<option value="8.01.1">Lecture 01: Powers of Ten
<option value="8.01.2">Lecture 02: 1D Kinematics
<option value="8.01.3">Lecture 03: Vectors
<optgroup label="8.02 Electricity and Magnestism">
<option value="8.02.1">Lecture 01: What holds our world together?
<option value="8.02.2">Lecture 02: Electric Field
<option value="8.02.3">Lecture 03: Electric Flux
<optgroup label="8.03 Physics III: Vibrations and Waves">
<option value="8.03.1">Lecture 01: Periodic Phenomenon
<option value="8.03.2">Lecture 02: Beats
<option value="8.03.3">Lecture 03: Forced Oscillations with Damping
</select>
</label>
<p><input type=submit value="â¶ Play">
</form>
optionèŠçŽ selectèŠçŽ ã®åãšããŠãdatalistèŠçŽ ã®åãšããŠãoptgroupèŠçŽ ã®åãšããŠãlabel屿§ããã³value屿§ãæã€å ŽåïŒç©ºãlabel屿§ãæã€ãvalue屿§ãæããªãå ŽåïŒããã¹ããlabel屿§ãæããªãå ŽåïŒèŠçŽ å
ã®ç©ºçœæåã§ãªãããã¹ããdisabled - ãã©ãŒã ã³ã³ãããŒã«ãç¡å¹ã§ãããã©ããlabel - ãŠãŒã¶ãŒå¯èŠã©ãã«selected - ããã©ã«ãã§ãªãã·ã§ã³ãéžæããããã©ããvalue - ãã©ãŒã éä¿¡ã«å¯ŸããŠäœ¿çšãããå€optionèŠçŽ ãå¥ã®optionèŠçŽ ãŸãã¯optgroupèŠçŽ ã®çŽåã«ååšããå ŽåããŸãã¯èŠªèŠçŽ ã«è¿œå ã®ã³ã³ãã³ããååšããªãå ŽåãoptionèŠçŽ ã®çµäºã¿ã°ã¯çç¥ããŠããããoptionïŒããã©ã«ã - èšå®ããªãïŒãmenuitemãmenuitemradioãŸãã¯separatorãaria-*屿§ã[NamedConstructor=Option(optional DOMString text = "", optional DOMString value, optional boolean defaultSelected = false, optional boolean selected = false)]
interface HTMLOptionElement : HTMLElement {
attribute boolean disabled;
readonly attribute HTMLFormElement? form;
attribute DOMString label;
attribute boolean defaultSelected;
attribute boolean selected;
attribute DOMString value;
attribute DOMString text;
readonly attribute long index;
};
optionèŠçŽ ã¯ãselectèŠçŽ ã§ãŸãã¯datalistèŠçŽ ã§ææ¡ã®ãªã¹ãã®äžéšãšããŠãªãã·ã§ã³ã衚ãã
selectã®å®çŸ©ã§èšèŒãããããç¹å®ã®ç¶æ³ã«ãããŠãoptionèŠçŽ ã¯ãselectèŠçŽ ã®ãã¬ãŒã¹ãã«ããŒã®ã©ãã«ãªãã·ã§ã³ãšãªãããšãã§ããããã¬ãŒã¹ãã«ããŒã®ã©ãã«ãªãã·ã§ã³ã¯ãå®éã®ãªãã·ã§ã³ã衚ããªãããselectã³ã³ãããŒã«ã®ã©ãã«ã衚ãã
disabled屿§ã¯ãçåœå±æ§ã§ãããèŠçŽ ã®disabled屿§ãååšããå ŽåããŸãã¯disabled屿§ã§ããoptgroupèŠçŽ ã®åãååšããå ŽåãoptionèŠçŽ ã¯ç¡å¹ã§ããã
An option element that is disabled must
prevent any click events that are queued on the user interaction task source from being dispatched on the
element.
label屿§ã¯ãèŠçŽ ã®ã©ãã«ãæäŸããã屿§ãååšããå Žåãoptionã®ã©ãã«ã¯labelã³ã³ãã³ã屿§ã®å€ã§ãããååšããªãå ŽåãèŠçŽ ã®text IDL屿§ã®å€ãšãªãã
labelã³ã³ãã³ã屿§ãæå®ãããå Žåã空ã§ãã£ãŠã¯ãªããªãã
value屿§ã¯ããã®èŠçŽ ã®å€ãæäŸããã屿§ãååšããå Žåãoptionã®å€ã¯valueã³ã³ãã³ã屿§ã®å€ã§ãããååšããªãå ŽåãèŠçŽ ã®text IDL屿§ã®å€ãšãªãã
selected屿§ã¯ãçåœå±æ§ã§ãããããã¯ãèŠçŽ ã®ããã©ã«ãselectednessã衚ãã
The dirtiness of an option element is
a boolean state, initially false. It controls whether adding or removing the selected content attribute has any effect.
The selectedness of an option
element is a boolean state, initially false. Except where otherwise specified, when the element is
created, its selectedness must be set to true if
the element has a selected attribute. Whenever an
option element's selected attribute is
added, if its dirtiness is false, its selectedness must be set to true.
Whenever an
option element's selected attribute is
removed, if its dirtiness is false, its selectedness must be set to false.
The Option() constructor, when called with three
or fewer arguments, overrides the initial state of the selectedness state to always be false even if the third
argument is true (implying that a selected attribute is
to be set). The fourth argument can be used to explicitly set the initial selectedness state when using the constructor.
multiple屿§ãæå®ãããªãselectèŠçŽ ã¯ããã®selected屿§èšå®ãæã€è€æ°ã®åå«optionèŠçŽ ãæã£ãŠã¯ãªããªãã
An option element's index is the number of
option elements that are in the same list of
options but that come before it in tree order. If the option
element is not in a list of options, then the
option element's index is zero.
selectedèŠçŽ ãéžæãããå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
èŠçŽ ã®çŸåšã®ç¶æ ãäžæžãããèšå®ãå¯èœã§ããã
indexãã®selectèŠçŽ ã®optionsãªã¹ãã§èŠçŽ ã®ã€ã³ããã¯ã¹ãè¿ãã
formååšãããªãã°ãèŠçŽ ã®formèŠçŽ ãè¿ãããŸãã¯ããã§ãªããã°nullãè¿ãã
textã¹ããŒã¹ãçžæ®ºããscriptèŠçŽ ãã¹ããããããå Žåãé€ããtextContentãšåãã
Option( [ text [, value [, defaultSelected [, selected ] ] ] ] )æ°ããoptionèŠçŽ ãè¿ãã
textåŒæ°ã¯èŠçŽ ã®ã³ã³ãã³ããèšå®ããã
valueåŒæ°ã¯value屿§ãèšå®ããã
defaultSelectedåŒæ°ã¯selected屿§ãèšå®ããã
selectedåŒæ°ã¯èŠçŽ ãéžæããããã©ãããèšå®ãããçç¥ãããå ŽåãããšãdefaultSelectedåŒæ°ãtrueã§ãã£ãŠããèŠçŽ ã¯éžæãããªãã
The disabled IDL attribute must
reflect the content attribute of the same name. The defaultSelected IDL attribute must
reflect the selected content attribute.
The label IDL attribute, on getting, must
return the element's label. On setting, the element's
label content attribute must be set to the new value.
The value IDL attribute, on getting, must
return the element's value. On setting, the element's
value content attribute must be set to the new value.
The selected IDL attribute, on getting,
must return true if the element's selectedness is
true, and false otherwise. On setting, it must set the element's selectedness to the new value, set its dirtiness to true, and then cause the
element to ask for a reset.
The index IDL attribute must return the
element's index.
The text IDL attribute, on getting, must return
the result of stripping and collapsing
whitespace from the concatenation of data of all the
Text node descendants of the option element, in tree order,
excluding any that are descendants of descendants of the option element that are
themselves script elements in the HTML namespace or script elements in the SVG namespace.
On setting, the text attribute must act as if the
textContent IDL attribute on the element had been set to the new value.
The form IDL attribute's behavior depends on
whether the option element is in a select element or not. If the
option has a select element as its parent, or has an
optgroup element as its parent and that optgroup element has a
select element as its parent, then the form IDL
attribute must return the same value as the form IDL attribute
on that select element. Otherwise, it must return null.
A constructor is provided for creating HTMLOptionElement objects (in addition to
the factory methods from DOM such as createElement()): Option(text, value, defaultSelected, selected). When invoked as a
constructor, it must return a new HTMLOptionElement object (a new option
element). If the first argument is not the empty string, the new object must have as its only
child a Text node whose data is the value of that argument. Otherwise, it must have
no children. If the value argument is present, the new object must have a
value attribute set with the value of the argument as its
value. If the defaultSelected argument is true, the new object must have a
selected attribute set with no value. If the selected argument is true, the new object must have its selectedness set to true; otherwise the selectedness must be set to false, even if the defaultSelected argument is true. The element's document must be the active
document of the browsing context of the Window object on which
the interface object of the invoked constructor is found.
textareaèŠçŽ autocomplete - ãã©ãŒã ãªãŒããã£ã«æ©èœã«å¯Ÿãããã³ãautofocus - ããŒãžãèªã¿èŸŒãŸããéã«ãã©ãŒã ã³ã³ãããŒã«ã«èªåçã«ãã©ãŒã«ã¹ããcols - è¡ãããã®æå€§æåæ°dirname - ãã©ãŒã éä¿¡ã§ãèŠçŽ ã®æ¹åãéä¿¡ããããã«äœ¿çšãããã©ãŒã ãã£ãŒã«ãã®åådisabled - ãã©ãŒã ã³ã³ãããŒã«ãç¡å¹ã§ãããã©ããform - formèŠçŽ ãšã³ã³ãããŒã«ãé¢é£ä»ããinputmode - å
¥åã¢ããªãã£ãŒãéžæããããã®ãã³ãmaxlength - å€ã®æå€§é·ãminlength - å€ã®æå°é·ãname - ãã©ãŒã éä¿¡ããã³form.elements APIã§äœ¿çšãããã©ãŒã ã³ã³ãããŒã«å placeholder - ãã©ãŒã ã³ã³ãããŒã«å
ã«é
眮ããããŠãŒã¶ãŒå¯èŠã©ãã«readonly - ãŠãŒã¶ãŒã«ãã£ãŠç·šéãããå€ãèš±å¯ãããã©ããrequired - ã³ã³ãããŒã«ããã©ãŒã éä¿¡ã«èŠæ±ããããã©ããrows - 衚瀺ããè¡æ°wrap - ã©ã®ããã«ãã©ãŒã ã³ã³ãããŒã«å€ããã©ãŒã éä¿¡ã«å¯ŸããŠå
ãŸãããtextbox ïŒããã©ã«ã - èšå®ããªãïŒãaria-*屿§ãinterface HTMLTextAreaElement : HTMLElement {
attribute DOMString autocomplete;
attribute boolean autofocus;
attribute unsigned long cols;
attribute DOMString dirName;
attribute boolean disabled;
readonly attribute HTMLFormElement? form;
attribute long maxLength;
attribute long minLength;
attribute DOMString name;
attribute DOMString placeholder;
attribute boolean readOnly;
attribute boolean required;
attribute unsigned long rows;
attribute DOMString wrap;
readonly attribute DOMString type;
attribute DOMString defaultValue;
[TreatNullAs=EmptyString] attribute DOMString value;
readonly attribute unsigned long textLength;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(DOMString error);
readonly attribute NodeList labels;
void select();
attribute unsigned long selectionStart;
attribute unsigned long selectionEnd;
attribute DOMString selectionDirection;
void setRangeText(DOMString replacement);
void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};
The textarea element represents a multiline plain text edit control for the element's raw value. ã³ã³ãããŒã«ã®ã³ã³ãã³ãã¯ãã³ã³ãããŒã«ã®ããã©ã«ãã®å€ã衚ãã
The raw value of a textarea
control must be initially the empty string.
This element has rendering requirements involving the bidirectional algorithm.
readonly屿§ã¯ãããã¹ãããŠãŒã¶ãŒã«ãã£ãŠç·šéã§ãããã©ãããå¶åŸ¡ããããã«äœ¿çšãããçåœå±æ§ã§ããã
ãã®äŸã«ãããŠãããã¹ããã£ãŒã«ãã¯èªã¿åãå°çšãã¡ã€ã«ã衚ãã®ã§ãèªã¿åãå°çšãšããŠããŒã¯ãããïŒ
Filename: <code>/etc/bash.bashrc</code> <textarea name="buffer" readonly> # System-wide .bashrc file for interactive bash(1) shells. # To enable the settings / commands in this file for login shells as well, # this file has to be sourced in /etc/profile. # If not running interactively, don't do anything [ -z "$PS1" ] && return ...</textarea>
Constraint validation: If the readonly attribute is specified on a textarea
element, the element is barred from constraint validation.
A textarea element is mutable if it is
neither disabled nor has a readonly attribute specified.
When a textarea is mutable, its raw value should be editable by the user: the user agent
should allow the user to edit, insert, and remove text, and to insert and remove line breaks in
the form of "LF" (U+000A) characters. Any time the user causes the element's raw value to change, the user agent must queue a
task to fire a simple event that bubbles named input at the textarea element. User agents may wait for a
suitable break in the user's interaction before queuing the task; for example, a user agent could
wait for the user to have not hit a key for 100ms, so as to only fire the event when the user
pauses, instead of continuously for each keystroke.
A textarea element has a dirty value
flag, which must be initially set to false, and must be set to true whenever the user
interacts with the control in a way that changes the raw
value.
When the textarea element's textContent IDL attribute changes value,
if the element's dirty value flag is false, then the
element's raw value must be set to the value of
the element's textContent IDL attribute.
The reset algorithm for textarea
elements is to set the element's value to the
value of the element's textContent IDL attribute.
If the element is mutable, the user agent should allow the user to change the writing direction of the element, setting it either to a left-to-right writing direction or a right-to-left writing direction. If the user does so, the user agent must then run the following steps:
Set the element's dir attribute to "ltr" if the user selected a left-to-right writing direction, and
"rtl" if the user selected a right-to-left writing
direction.
Queue a task to fire a simple event that bubbles named input at the textarea element.
cols屿§ã¯è¡ãããã®äºæ³æå€§æåæ°ãæå®ãããcols屿§ãæå®ãããå Žåããã®å€ã¯0ãã倧ãã劥åœãªéè² æŽæ°ã§ãªããã°ãªããªããIf applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character width is that value; otherwise, it is 20.
The user agent may use the textarea element's character width as a hint to the user as to how many
characters the server prefers per line (e.g. for visual user agents by making the width of the
control be that many characters). In visual renderings, the user agent should wrap the user's
input in the rendering so that each line is no wider than this number of characters.
rows屿§ã¯ã衚瀺ããè¡æ°ãæå®ãããrows屿§ãæå®ãããå Žåããã®å€ã¯0ãã倧ãã劥åœãªéè² æŽæ°ã§ãªããã°ãªããªããIf applying the rules for parsing non-negative integers to the attribute's value results in a number greater than zero, then the element's character height is that value; otherwise, it is 2.
Visual user agents should set the height of the control to the number of lines given by character height.
wrap屿§ã¯ã2ã€ã®ããŒã¯ãŒããšç¶æ
ããã€çåœå±æ§ã§ãããsoftããŒã¯ãŒãã¯Softç¶æ
ã«å¯Ÿå¿ããhardããŒã¯ãŒãã¯Hardç¶æ
ã«å¯Ÿå¿ãããæ¬ æå€ã®ããã©ã«ãã¯ãSoftç¶æ
ã§ããã
Softç¶æ
ã¯ãããã¹ããéä¿¡ãããéãïŒã¬ã³ããªã³ã°ã«ãããŠããã¹ããäŸç¶ãšããŠå
ãŸããããšã¯ã§ãããïŒtextareaã§ããã¹ããå
ãŸããªãããšã瀺ãã
Hardç¶æ
ã¯ãtextareaã§ããã¹ãããŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠè¿œå ãããæ¹è¡ãæã€ã®ã§ãããã¹ããéä¿¡ãããéã«ããã¹ããå
ãŸããããšã瀺ãã
èŠçŽ ã®wrap屿§ãHardç¶æ
ã«ããå Žåãcols屿§ãæå®ããªããã°ãªããªãã
For historical reasons, the element's value is normalised in three different ways for three
different purposes. The raw value is the value as
it was originally set. It is not normalized. The API
value is the value used in the value IDL attribute.
It is normalized so that line breaks use "LF" (U+000A) characters. Finally, there is the
form submission value. It is normalized so that line breaks
use U+000D CARRIAGE RETURN "CRLF" (U+000A) character pairs, and in addition, if necessary
given the element's wrap attribute, additional line breaks
are inserted to wrap the text at the given width.
The element's API value is defined to be the element's raw value with the following transformation applied:
Replace every U+000D CARRIAGE RETURN "CRLF" (U+000A) character pair from the raw value with a single "LF" (U+000A) character.
Replace every remaining U+000D CARRIAGE RETURN character from the raw value with a single "LF" (U+000A) character.
The element's value is defined to be the element's raw value with the following transformation applied:
Replace every occurrence of a "CR" (U+000D) character not followed by a "LF" (U+000A) character, and every occurrence of a "LF" (U+000A) character not preceded by a "CR" (U+000D) character, by a two-character string consisting of a U+000D CARRIAGE RETURN "CRLF" (U+000A) character pair.
If the element's wrap attribute is in the Hard state, insert U+000D CARRIAGE RETURN "CRLF" (U+000A) character pairs into the string using a UA-defined algorithm so that each line
has no more than character width characters. For
the purposes of this requirement, lines are delimited by the start of the string, the end of the
string, and U+000D CARRIAGE RETURN "CRLF" (U+000A) character pairs.
maxlength屿§ã¯ãtextareaèŠçŽ ã®æ±ãå€ãã©ã°ã«ãã£ãŠå¶åŸ¡ããããã©ãŒã ã³ã³ãããŒã«maxlength屿§ã§ããã
textareaèŠçŽ ãæå€§èš±å®¹å€ã®é·ããæã€å Žåããã®èŠçŽ ã®åã¯ãèŠçŽ ã®textContentIDL屿§å€ã«å±ããã³ãŒãåäœã®é·ãã«çãããããŸãã¯èŠçŽ ã®æå€§èš±å®¹å€ã®é·ããããå°ãããªãããã«ããªããã°ãªããªãã
minlength屿§ã¯ãtextareaèŠçŽ ã®æ±ãå€ãã©ã°ã«ãã£ãŠå¶åŸ¡ããããã©ãŒã ã³ã³ãããŒã«minlength屿§ã§ããã
required屿§ã¯çåœå±æ§ã§ãããæå®ãããå ŽåããŠãŒã¶ãŒããã©ãŒã ãéä¿¡ããåã«å€ãå
¥åããå¿
èŠãããã
Constraint validation: If the element has its required attribute specified, and the element is mutable, and the element's value is the empty string, then the element is suffering
from being missing.
ã³ã³ãããŒã«ãå€ãæããªãå Žåãplaceholder屿§ã¯ãããŒã¿å
¥åã䌎ããŠãŒã¶ãŒã®æ¯æŽãæå³ããçããã³ãïŒåèªãçããã¬ãŒãºïŒã衚ãããã³ãã¯ããµã³ãã«å€ãŸãã¯æåŸ
ããã圢åŒã®ç°¡åãªèª¬æãããããªãã
placeholder屿§ã¯ãlabelã®ä»£æ¿ãšããŠäœ¿çšãã¹ãã§ãªãããã³ããä»ã®å©èšããã¹ãã«ã€ããŠã¯ãã³ã³ãããŒã«ã®æ¬¡ã«ããã¹ãã眮ãã
labelã®ä»£æ¿ãšããŠã®placeholder屿§ã®äœ¿çšã¯ãé«éœ¢ãŠãŒã¶ãŒããã³èªç¥ãã¢ããªãã£ãŒã埮现ãªéåæèœãèŠèŠã«é害ãæã€ãŠãŒã¶ãŒãå«ãå¹
åºããŠãŒã¶ãŒã®ã³ã³ãããŒã«ã®ã¢ã¯ã»ã·ããªãã£ãŒããã³ãŠãŒã¶ãŒããªãã£ãŒãæžããããšããããã³ã³ãããŒã«ã®labelã«ãã£ãŠäžãããããã³ãã¯æ¯å衚瀺ãããäžæ¹ã§ãplaceholder屿§ã«äžããããçããã³ãã¯ããŠãŒã¶ãŒãå€ãå
¥åããåã«ã®ã¿è¡šç€ºããããããã«ãplaceholderããã¹ãã¯äºãåããããå€ãšééãããããããããäžè¬ã«å®è£
ããããã¬ãŒã¹ãã«ããŒããã¹ãã®ããã©ã«ãè²ãäžååãªã³ã³ãã©ã¹ããæäŸãããããŠå¥ã®å¯èŠlabelã®æ¬ åŠã¯ãã³ã³ãããŒã«ã®ãã©ãŒã«ã¹ãèšå®ããããã«å©çšå¯èœãªãããé åã®ãµã€ãºãå°ããããã
User agents should present this hint to the user when the element's value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other "CR" (U+000D) and "LF" (U+000A) characters in the hint, must be treated as line breaks when rendering the hint.
name屿§ã¯èŠçŽ ã®ååã衚ããdirname屿§ã¯ãèŠçŽ ã®æ¹åãã©ã®ããã«éä¿¡ãããããå¶åŸ¡ãããdisabled屿§ã¯ãã³ã³ãããŒã«ãéã€ã³ã¿ã©ã¯ãã£ãã«ããããããã³ãã®å€ãéä¿¡ããã®ãé²ãããã«äœ¿çšããããform屿§ã¯ããã©ãŒã ææè
ãštextareaèŠçŽ ãæç€ºçã«é¢é£ä»ããããã«äœ¿çšããããautofocus屿§ã¯ãã©ãŒã«ã¹ãå¶åŸ¡ãããautocomplete屿§ã¯ãã©ã®ããã«ãŠãŒã¶ãŒãšãŒãžã§ã³ãããªãŒããã£ã«ã®æ¯ãèããæäŸããããå¶åŸ¡ããã
typeæåå"textarea"ãè¿ãã
valueèŠçŽ ã®çŸåšã®å€ãè¿ãã
å€ã倿Žããèšå®ãå¯èœã§ããã
The cols, placeholder, required, rows, and wrap attributes must reflect the
respective content attributes of the same name. The cols
and rows attributes are limited to only non-negative
numbers greater than zero. The cols attribute's
default value is 20. The rows attribute's default value is
2. The dirName IDL attribute must
reflect the dirname content attribute. The maxLength IDL attribute must
reflect the maxlength content attribute,
limited to only non-negative numbers. The minLength IDL attribute must
reflect the minlength content attribute,
limited to only non-negative numbers. The readOnly IDL attribute must reflect
the readonly content attribute.
The type IDL attribute must return the value
"textarea".
The defaultValue IDL attribute must
act like the element's textContent IDL attribute.
The value attribute must, on getting, return
the element's API value; on setting, it must set
the element's raw value to the new value, set the
element's dirty value flag to true, and should then
move the text entry cursor position to the end of the text field, unselecting any selected text
and resetting the selection direction to none.
The textLength IDL attribute must
return the code-unit length of the element's API value.
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), and setCustomValidity() methods, are part of the constraint validation API. labelsIDL屿§ã¯ã èŠçŽ ã®labelã®ãªã¹ããæäŸãããThe select(), selectionStart, selectionEnd, selectionDirection, setRangeText(), and setSelectionRange() methods and IDL attributes expose the element's text selection. The autofocus, disabled, form, and name IDL attributes are part of the element's forms API.
ããã§ããã©ãŒã ã§ç¡å¶éã®èªç±åœ¢åŒã®ããã¹ãå
¥åã«å¯ŸããŠäœ¿çšãããtextareaã®äŸã¯æ¬¡ã®ãšããïŒ
<p>If you have any comments, please let us know: <textarea cols=80 name=comments></textarea></p>
ã³ã¡ã³ãã®æå€§é·ãæå®ããããã«ãmaxlength屿§ã䜿çšã§ããïŒ
<p>If you have any short comments, please let us know: <textarea cols=80 name=comments maxlength=200></textarea></p>
ããã©ã«ãå€ãäžããããã«ãããã¹ããèŠçŽ å ã«å«ãããšãã§ããïŒ
<p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p>
ãŸããæå°ã®é·ããäžããããšãã§ãããããã§ãæåã¯ãŠãŒã¶ãŒã«ãã£ãŠèšå ¥ãããå¿ èŠãããããã³ãã¬ãŒãïŒããã¯æå°ã®é·ããããçããªã£ãŠããïŒãèšããããŠãããããã©ãŒã ãéä¿¡ããã«ã¯äžååã§ããã
<textarea required minlength="500">Dear Madam Speaker, Regarding your letter dated ... ... Yours Sincerely, ...</textarea>
ãã¬ãŒã¹ãã«ããŒã¯æç€ºçãªãã³ãã¬ãŒããæäŸããããšãªãããŠãŒã¶ãŒãžã®åºæ¬çãªåœ¢ãææ¡ããããã«åæ§ã«äžããããšãã§ããã
<textarea placeholder="Dear Francine, They closed the parks this week, so we won't be able to meet your there. Should we just have dinner? Love, Daddy"></textarea>
ãã©ãŠã¶ãå€ãšãšãã«èŠçŽ ã®æ¹åãéä¿¡ãããå Žåãdirnameã«å±æ§ãæå®ã§ããïŒ
<p>If you have any comments, please let us know (you may use either English or Hebrew for your comments): <textarea cols=80 name=comments dirname=comments.dir></textarea></p>
keygenèŠçŽ autofocus - ããŒãžãèªã¿èŸŒãŸããéã«ãã©ãŒã ã³ã³ãããŒã«ã«èªåçã«ãã©ãŒã«ã¹ããchallenge - çæãã眲åãããå
¬ééµãšãšãã«ããã±ãŒãžåããæåådisabled - ãã©ãŒã ã³ã³ãããŒã«ãç¡å¹ã§ãããã©ããform - formèŠçŽ ãšã³ã³ãããŒã«ãé¢é£ä»ããkeytype - çæããæå·éµã®çš®é¡name - ãã©ãŒã éä¿¡ããã³form.elements APIã§äœ¿çšãããã©ãŒã ã³ã³ãããŒã«å interface HTMLKeygenElement : HTMLElement {
attribute boolean autofocus;
attribute DOMString challenge;
attribute boolean disabled;
readonly attribute HTMLFormElement? form;
attribute DOMString keytype;
attribute DOMString name;
readonly attribute DOMString type;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(DOMString error);
readonly attribute NodeList labels;
};
keygenèŠçŽ ã¯ãéµãã¢ãžã§ãã¬ãŒã¿ãŒã³ã³ãããŒã«ã衚ããã³ã³ãããŒã«ã®ãã©ãŒã ãéä¿¡ããããšãç§å¯éµã¯ããŒã«ã«ããŒã¹ãã¢ã«ä¿åãããå
¬ééµã¯ããã±ãŒãžåãããŠãµãŒãã«éä¿¡ãããã
challenge屿§ãæå®ããŠãããããã®å€ã¯éä¿¡éµãšäžç·ã«ããã±ãŒãžã«ãããã
keytype屿§ã¯ãåæå±æ§ã§ãããæ¬¡ã®è¡šã¯ãããŒã¯ãŒããšå±æ§ã®ç¶æ
ã瀺ãã1åç®ã®ããŒã¯ãŒãã¯ãããŒã¯ãŒããšåãè¡ã§2åç®ã®ã»ã«å
ã®ç¶æ
ã«å¯Ÿå¿ã¥ããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããããã®å€ããµããŒãããå¿
èŠã¯ãªããããµããŒãããã¢ã«ãŽãªãºã ã«å¯Ÿå¿ããå€ãåã«èªèããªããã°ãªããªãã
| ããŒã¯ãŒã | ç¶æ |
|---|---|
rsa
| RSA |
ç¡å¹å€ã®ããã©ã«ãã¯ãunknownç¶æ ã§ããããµããŒããããå Žåãæ¬ æå€ã®ããã©ã«ãã¯RSAç¶æ ã§ãããããã§ãªããã°unknownç¶æ ã§ããã
ãã®ä»æ§ã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ãããµããŒããã¹ãéµã®çš®é¡ãæå®ããªãâãŠãŒã¶ãŒãšãŒãžã§ã³ããéµã®çš®é¡ããŸã£ãããµããŒãããªãããšãå¯èœã§ããã
The user agent may expose a user interface for each keygen element to allow the
user to configure settings of the element's key pair generator, e.g. the key length.
The reset algorithm for keygen
elements is to set these various configuration settings back to their defaults.
The element's value is the string returned from the following algorithm:
Use the appropriate step from the following list:
keytype attribute is in the RSA stateGenerate an RSA key pair using the settings given by the user, if appropriate, using the
md5WithRSAEncryption RSA signature algorithm (the signature algorithm
with MD5 and the RSA encryption algorithm) referenced in section 2.2.1 ("RSA Signature
Algorithm") of RFC 3279, and defined in RFC 3447. [RFC3279] [RFC3447]
keytype attribute is in the unknown stateThe given key type is not supported. Return the empty string and abort this algorithm.
Let private key be the generated private key.
Let public key be the generated public key.
Let signature algorithm be the selected signature algorithm.
If the element has a challenge attribute, then let
challenge be that attribute's value. Otherwise, let challenge be the empty string.
Let algorithm be an ASN.1 AlgorithmIdentifier
structure as defined by RFC 5280, with the algorithm field giving the
ASN.1 OID used to identify signature algorithm, using the OIDs defined in
section 2.2 ("Signature Algorithms") of RFC 3279, and the parameters field
set up as required by RFC 3279 for AlgorithmIdentifier structures for that
algorithm. [X690] [RFC5280] [RFC3279]
Let spki be an ASN.1 SubjectPublicKeyInfo structure
as defined by RFC 5280, with the algorithm field set to the algorithm structure from the previous step, and the subjectPublicKey field set to the BIT STRING value resulting from ASN.1 DER
encoding the public key. [X690] [RFC5280]
Let publicKeyAndChallenge be an ASN.1 PublicKeyAndChallenge
structure as defined below, with the spki field set to the spki structure from the previous step, and the challenge
field set to the string challenge obtained earlier. [X690]
Let signature be the BIT STRING value resulting from ASN.1 DER encoding the signature generated by applying the signature algorithm to the byte string obtained by ASN.1 DER encoding the publicKeyAndChallenge structure, using private key as the signing key. [X690]
Let signedPublicKeyAndChallenge be an ASN.1
SignedPublicKeyAndChallenge structure as defined below, with the publicKeyAndChallenge field set to the publicKeyAndChallenge
structure, the signatureAlgorithm field set to the algorithm structure, and the signature field set to the BIT
STRING signature from the previous step. [X690]
Return the result of base64 encoding the result of ASN.1 DER encoding the signedPublicKeyAndChallenge structure. [RFC4648] [X690]
The data objects used by the above algorithm are defined as follows. These definitions use the same "ASN.1-like" syntax defined by RFC 5280. [RFC5280]
PublicKeyAndChallenge ::= SEQUENCE {
spki SubjectPublicKeyInfo,
challenge IA5STRING
}
SignedPublicKeyAndChallenge ::= SEQUENCE {
publicKeyAndChallenge PublicKeyAndChallenge,
signatureAlgorithm AlgorithmIdentifier,
signature BIT STRING
}
Constraint validation: The keygen element is barred from
constraint validation.
form屿§ã¯ããã©ãŒã ã®ææè
ãškeygenèŠçŽ ãæç€ºçã«é¢é£ä»ããããã«äœ¿çšããããname屿§ã¯èŠçŽ ã®ååã衚ããdisabled屿§ã¯ãã³ã³ãããŒã«ãéã€ã³ã¿ã©ã¯ãã£ãã«ããããããã³ãã®å€ãéä¿¡ããã®ãé²ãããã«äœ¿çšããããautofocus屿§ã¯ãã©ãŒã«ã¹ãå¶åŸ¡ããã
typeæåå"keygen"ãè¿ãã
The challenge IDL attribute must
reflect the content attribute of the same name.
The keytype IDL attribute must
reflect the content attribute of the same name, limited to only known
values.
The type IDL attribute must return the value
"keygen".
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), and setCustomValidity() methods, are part of the constraint validation API. labelsIDL屿§ã¯ã èŠçŽ ã®labelã®ãªã¹ããæäŸãããautofocusãdisabledãformãããã³nameIDL屿§ã¯èŠçŽ ã®ãã©ãŒã APIã®äžéšã§ããã
ãã®ä»æ§ã¯ãçæãããç§å¯éµã䜿çšããæ¹æ³ãæå®ããªããSignedPublicKeyAndChallengeïŒSPKACïŒæ§é ãåä¿¡ããåŸããµãŒãã¯ã¯ã©ã€ã¢ã³ãèšŒææžãçæããããŠã³ããŒãã«å¯ŸããŠãŠãŒã¶ãŒã«æ»ã£ãŠèšŒææžãæäŸããããšãæåŸ
ãããããã®èšŒææžã¯ãäžåºŠããŠã³ããŒãããŠãç§å¯éµãšäžç·ã«éµã¹ãã¢ã«æ ŒçŽãããŠãããTLSããã³èšŒææžã«ããèªèšŒã䜿çšãããµãŒãã¹ãžã®èªèšŒã«äœ¿çšã§ããã
éµãã¢ãçæããã«ã¯ããŠãŒã¶ãŒã®éµã¹ãã¢ã«ç§å¯éµã远å ããŠããµãŒããŒãžå ¬ééµãéä¿¡ããæ¬¡ã®ãããªããŒã¯ã¢ããã䜿çšã§ããïŒ
<form action="processkey.cgi" method="post" enctype="multipart/form-data"> <p><keygen name="key"></p> <p><input type=submit value="Submit key..."></p> </form>
ãã®åŸããµãŒãã¯"key"ã®å€ãšããŠããã±ãŒãžåãããRSAå
¬ééµããã€ãã©ãŒã ã®éä¿¡ãåä¿¡ãããäžèšã®ããã«ãã¯ã©ã€ã¢ã³ãèšŒææžãçæãããªã©ãããã¯ããŸããŸãªç®çã«äœ¿çšã§ããã
outputèŠçŽ for - åºåãèšç®ãããã³ã³ãããŒã«ãã©ãŒã ãæå®ããform - formèŠçŽ ãšã³ã³ãããŒã«ãé¢é£ä»ããname - ãã©ãŒã éä¿¡ããã³form.elements APIã§äœ¿çšãããã©ãŒã ã³ã³ãããŒã«å statusïŒããã©ã«ã - èšå®ããªãïŒã ä»»æã®roleå€ãaria-*屿§ãinterface HTMLOutputElement : HTMLElement {
[PutForwards=value] readonly attribute DOMSettableTokenList htmlFor;
readonly attribute HTMLFormElement? form;
attribute DOMString name;
readonly attribute DOMString type;
attribute DOMString defaultValue;
attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(DOMString error);
readonly attribute NodeList labels;
};
outputèŠçŽ ã¯ãèšç®ã®çµæãŸãã¯ãŠãŒã¶ãŒã¢ã¯ã·ã§ã³ã衚ãã
forã³ã³ãã³ã屿§ã¯ãèšç®ã«åå ãããŸãã¯å¥ã®æ¹æ³ã§èšç®ã«åœ±é¿ãäžããå€ã衚ããèšç®ãšèŠçŽ ã®çµæã®éã§äœãããæç€ºçãªé¢ä¿ãäžãããfor屿§ãæå®ããå Žåã¯ããããããåãDocumentã§èŠçŽ ã®IDã®å€ãæããªããã°ãªããªãã倧æåã»å°æååºå¥ã§ããäžæãªã¹ããŒã¹åºåãããŒã¯ã³ã®é äžåã®ã»ããã§æ§æãããæååãå«ãŸãªããã°ãªããªãã
form屿§ã¯ããã©ãŒã ã®ææè
ãšoutputèŠçŽ ãæç€ºçã«é¢é£ä»ããããã«äœ¿çšããããname屿§ã¯èŠçŽ ã®ååã衚ãã
The element has a value mode flag which is either value or default. Initially, the value mode flag must be set to default.
The element also has a default value. Initially, the default value must be the empty string.
When the value mode flag is in mode default, the contents of the element represent both the
value of the element and its default value. When
the value mode flag is in mode value, the contents of the element represent the value of
the element only, and the default value is only
accessible using the defaultValue IDL attribute.
Whenever the element's descendants are changed in any way, if the value mode flag is in mode default, the element's default value must be set to the value of the element's
textContent IDL attribute.
The reset algorithm for output
elements is to set the element's value mode flag to default and then to set the element's
textContent IDL attribute to the value of the element's default value (thus replacing the element's child
nodes).
value [ = value ]èŠçŽ ã®çŸåšã®å€ãè¿ãã
å€ã倿Žããèšå®ãå¯èœã§ããã
defaultValue [ = value ]èŠçŽ ã®çŸåšã®ããã©ã«ãå€ãè¿ãã
ããã©ã«ãå€ã倿Žããèšå®ãå¯èœã§ããã
typeæåå"output"ãè¿ãã
The value IDL attribute must act like the
element's textContent IDL attribute, except that on setting, in addition, before the
child nodes are changed, the element's value mode flag
must be set to value.
The defaultValue IDL attribute, on
getting, must return the element's default value.
On setting, the attribute must set the element's default
value, and, if the element's value mode flag is in
the mode default, set the element's
textContent IDL attribute as well.
The type attribute must return the string
"output".
The htmlFor IDL attribute must
reflect the for content attribute.
The willValidate, validity, and validationMessage IDL attributes, and the checkValidity(), and setCustomValidity() methods, are part of the constraint validation API. labelsIDL屿§ã¯ã èŠçŽ ã®labelã®ãªã¹ããæäŸãããThe form and name IDL attributes are part of the element's forms API.
ã·ã³ãã«ãªé»åã¯ãèšç®çµæã®è¡šç€ºã«å¯ŸããŠoutputã䜿çšã§ããïŒ
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber"> <input name=a type=number step=any> + <input name=b type=number step=any> = <output name=o for="a b"></output> </form>
ãã®äŸã«ãããŠãçµæãå
¥ã£ãŠããããã«ãoutputèŠçŽ ã¯ããªã¢ãŒããµãŒãããã®çµæãå ±åããããã«äœ¿çšãããïŒ
<output id="result"></output>
<script>
var primeSource = new WebSocket('ws://primes.example.net/');
primeSource.onmessage = function (event) {
document.getElementById('result').value = event.data;
}
</script>
progressèŠçŽ progressèŠçŽ ã®åå«ãååšããŠã¯ãªããªããvalue - èŠçŽ ã®çŸåšå€max - ç¯å²ã®äžéprogressbar ïŒããã©ã«ã - èšå®ããªãïŒãaria-*屿§ãinterface HTMLProgressElement : HTMLElement {
attribute double value;
attribute double max;
readonly attribute double position;
readonly attribute NodeList labels;
};
progressèŠçŽ ã¯ãã¿ã¹ã¯ã®å®äºã®é²æã衚ãã鲿ã¯ã鲿ãé²è¡ããŠãããïŒããšãã°ãã¿ã¹ã¯ãå¿çãããªã¢ãŒããã¹ããåŸ
ã£ãŠãããããªã©ïŒã¿ã¹ã¯ãå®äºããåã«ã©ã®çšåºŠäœæ¥ãæ®ã£ãŠããã®ããæããã§ãªãããšãæãäžç¢ºå®ã§ãããã鲿ããããŸã§ã«å®äºããŠããäœæ¥çãäžãã0ããæå€§ã®ç¯å²ã«ãããæ°å€ã§ãããã®ããããã§ããã
èŠçŽ ã«ãã£ãŠè¡šãããçŸè¡ã®ã¿ã¹ã¯å®äºã決å®ãã2ã€ã®å±æ§ããããvalue屿§ã¯ã©ã®çšåºŠã¿ã¹ã¯ãå®äºããŠããããæå®ããmax屿§ã¯ãã¿ã¹ã¯ãåèšã§ã©ã®çšåºŠã®ã¿ã¹ã¯ãå¿
èŠããæå®ãããåäœã¯ä»»æã§ãããæå®ãããªãã
æéã®é²æããŒãäœæããããã«ã¯ãçŸåšã®é²è¡ç¶æ³ïŒmax屿§ãæå®ãããŠããå Žåã¯0.0ã1.0ã®æ°ããŸãã¯0ããmax屿§å€ãŸã§ã®æ°ã®ããããïŒã§value屿§ã远å ãããç¡éã®é²æããŒãäœæããããã«ã¯ãvalue屿§ãåé€ããã
èè ã¯ãŸãã鲿ãã¬ã¬ã·ãŒãŠãŒã¶ãŒãšãŒãžã§ã³ãã®ãŠãŒã¶ãŒã«äœ¿çšå¯èœã«ãªããããèŠçŽ å ã®ããã¹ããšããŠçŸåšã®å€ãšæå€§å€ãã€ã³ã©ã€ã³ã§å«ãããæšå¥šãããã
ããã¯èªåé²è¡ç¶æ³ã衚瀺ãããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®æçã§ããïŒ
<section>
<h2>Task Progress</h2>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
</section>
ïŒãã®äŸã«ãããŠupdateProgress()ã¡ãœããã¯ãã¿ã¹ã¯ãé²è¡ããã«ã€ããŠãå®éã®é²æããŒãæŽæ°ããããã«ããŒãžã«ä»ã®ã³ãŒãã«ãã£ãŠåŒã³åºããããïŒ
valueããã³max屿§ãååšããå Žåã劥åœãªæµ®åå°æ°ç¹æ°ã®å€ãæããªããã°ãªããªããvalue屿§ãååšããå Žåã0å以äžã®å€ããããªããã°ãªããããã€ååšããå Žåmax屿§ã®å€ä»¥äžãæããªããã°ãªããªããããã§ãªããã°1.0ã§ãªããã°ãªããªããmax屿§ãååšããå ŽåããŒããã倧ããå€ãæããªããã°ãªããªãã
progressèŠçŽ ã¯ãã¿ã¹ã¯ã®é²è¡ç¶æ³ãšã¯å¯Ÿç
§çã«ãé©åãªã²ãŒãžã§ããäœãã®ããã«äœ¿çšããééã£ãèŠçŽ ã§ãããããšãã°ãprogressã䜿çšããŠãã£ã¹ã¯é åã®äœ¿çšç¶æ³ã瀺ãããšã¯äžé©åã§ãããã代ããã«ãmeterèŠçŽ ã¯ããã®ãããªãŠãŒã¹ã±ãŒã¹ã§å©çšå¯èœã§ããã
User agent requirements: If the value
attribute is omitted, then the progress bar is an indeterminate progress bar. Otherwise, it is a
determinate progress bar.
If the progress bar is a determinate progress bar and the element has a max attribute, the user agent must parse the max attribute's value according to the rules for parsing
floating-point number values. If this does not result in an error, and if the parsed value
is greater than zero, then the maximum value of the
progress bar is that value. Otherwise, if the element has no max attribute, or if it has one but parsing it resulted in an
error, or if the parsed value was less than or equal to zero, then the maximum value of the progress bar is 1.0.
If the progress bar is a determinate progress bar, user agents must parse the value attribute's value according to the rules for
parsing floating-point number values. If this does not result in an error, and if the
parsed value is less than the maximum value and
greater than zero, then the current value of the
progress bar is that parsed value. Otherwise, if the parsed value was greater than or equal to the
maximum value, then the current value of the progress bar is the maximum value of the progress bar. Otherwise, if parsing
the value attribute's value resulted in an error, or a
number less than or equal to zero, then the current
value of the progress bar is zero.
UA requirements for showing the progress bar: When representing a
progress element to the user, the UA should indicate whether it is a determinate or
indeterminate progress bar, and in the former case, should indicate the relative position of the
current value relative to the maximum value.
positionæéã®é²æããŒïŒæ¢ç¥ã®çŸåšå€ãšæå€§å€ãæã€ãã®ïŒã«ã€ããŠãæå€§å€ã§çŸåšå€ãé€ç®ããçµæãè¿ãã
ç¡éã®é²æããŒã¯ã-1ãè¿ãã
If the progress bar is an indeterminate progress bar, then the position IDL attribute must return â1.
Otherwise, it must return the result of dividing the current
value by the maximum value.
If the progress bar is an indeterminate progress bar, then the value IDL attribute, on getting, must return 0.
Otherwise, it must return the current value. On
setting, the given value must be converted to the best representation of the number as a
floating-point number and then the value content
attribute must be set to that string.
Setting the value IDL attribute to itself
when the corresponding content attribute is absent would change the progress bar from an
indeterminate progress bar to a determinate progress bar with no progress.
The max IDL attribute must
reflect the content attribute of the same name, limited to numbers greater than
zero. The default value for max is 1.0.
The labels IDL attribute provides a list of the element's
labels.
meterèŠçŽ meterèŠçŽ ã®åå«ãååšããŠã¯ãªããªããvalue - èŠçŽ ã®çŸåšå€min - ç¯å²ã®äžémax - ç¯å²ã®äžélow - äœåã®äžéhigh - é«åã®äžéoptimum - ã²ãŒãžã«ãããæé©å€interface HTMLMeterElement : HTMLElement {
attribute double value;
attribute double min;
attribute double max;
attribute double low;
attribute double high;
attribute double optimum;
readonly attribute NodeList labels;
};
meterèŠçŽ ã¯æ¢ç¥ã®ç¯å²å
ã§ã¹ã«ã©ãŒéããŸãã¯å°æ°ã®å€ã衚ããããšãã°ããã£ã¹ã¯äœ¿çšéãã¯ãšãªçµæã®é¢é£æ§ããŸãã¯ç¹å®ã®åè£ãéžæããããã®æç¥šäººå£ã®å²åãªã©ã§ããã
ããã¯ãŸããã²ãŒãžãšããŠç¥ãããã
meterèŠçŽ ã¯ãïŒé²æããŒã®ããã«ïŒé²è¡ç¶æ³ã瀺ãããã«äœ¿çšãã¹ãã§ãªãããã®åœ¹å²ã«å¯ŸããŠãHTMLã¯ç¬ç«ããŠprogressèŠçŽ ãæäŸããã
meterèŠçŽ ã¯ãŸããä»»æã®ç¯å²ã®ã¹ã«ã©ãŒå€ã衚ããã®ã§ãªãâããšãã°ãæ¢ç¥ã®æå€§å€ãååšããªãéããééãé«ããå ±åããããã«ããã䜿çšããããšã¯èª€ãã§ãããã
èŠçŽ ã«ãã£ãŠè¡šãããã²ãŒãžã®æå³ã決å®ãã6ã€ã®å±æ§ãããã
min屿§ã¯ç¯å²ã®äžéãæå®ããmax屿§ã¯äžéãæå®ãããvalue屿§ã¯ã"枬å®ããã"å€ãšããŠç€ºãã²ãŒãžãæã€å€ãæå®ããã
ä»ã®3ã€ã®å±æ§ã¯ã"æé©"éšåã§ããã²ãŒãžã®äžéšã瀺ãããã«ãã²ãŒãžã®ç¯å²ã"äœ"ã"äž"ã"é«"ã®éšåã«åå²ããŠäœ¿çšã§ãããlow屿§ã¯"äœ"éšåã§ãããšèããããç¯å²ãæå®ããhigh屿§ã¯"é«"éšåã§ãããšèããããç¯å²ãæå®ãããoptimumã¯ã"æé©"ã§ããäœçœ®ãäžãããããã"é«"å€ããé«ãå Žåãããé«ãå€ãããè¯ãããšã瀺ããããã"äœ"ããŒã¯ãããäœãå Žåãããäœãå€ãããè¯ãããšã瀺ããèªç¶ã«éã«ããå Žåãé«ããäœãããªãå€ãè¯ãããšã瀺ãã
Authoring requirements: The value attribute must be specified. The value, min, low, high, max, and optimum attributes,
when present, must have values that are valid
floating-point numbers.
å ããŠã屿§å€ã¯ããã«å¶çŽãããïŒ
valueãvalue屿§ã®æ°ãšããã
min屿§ãæå®ãããå Žåãminimumããã®å±æ§å€ãšãããããã§ãªããã°0ãšããã
max屿§ãæå®ãããå Žåãmaximumããã®å±æ§å€ãšãããããã§ãªããã°1.0ãšããã
次ã®äžçåŒã¯ãå¿ èŠã«å¿ããŠä¿æããªããã°ãªããªãïŒ
low †maximumïŒlowãæå®ãããå ŽåïŒhigh †maximumïŒhighãæå®ãããå ŽåïŒoptimum †maximumïŒoptimumãæå®ãããå ŽåïŒlow †high ïŒlowãšhighã®äž¡æ¹ãæå®ãããå ŽåïŒæå°ãŸãã¯æå€§ãæå®ããªãå Žåãç¯å²ã¯0ïœ1ã§ãããšä»®å®ããããããã£ãŠå€ã¯ãã®ç¯å²å ã«ããå¿ èŠãããã
èè
ã¯ãmeterèŠçŽ ããµããŒãããªããŠãŒã¶ãŒãšãŒãžã§ã³ãã®ãŠãŒã¶ãŒã®ããã«ãèŠçŽ ã®ã³ã³ãã³ãã§ã²ãŒãžã®ç¶æ
ã®ããã¹ã衚çŸãå«ãããæšå¥šãããã
次ã®äŸã¯ããã¹ãŠ3/4ã§æºãããã3ã€ã®ã²ãŒãžã瀺ãïŒ
Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter> Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter> Tickets sold: <meter min="0" max="100" value="75"></meter>
ç¯å²ãäžãããã®ã§ãªãïŒãããŠããã©ã«ãã®æå€§å€ã¯1ã§ãããããäž¡æ¹ã®ã²ãŒãžãæå€§éã«éããŠããïŒãããæ¬¡ã®äŸã¯ãèŠçŽ ã®èª€ã£ãçšæ³ã§ããïŒ
<p>The grapefruit pie had a radius of <meter value=12>12cm</meter> and a height of <meter value=2>2cm</meter>.</p> <!-- BAD! -->
代ããã«ãmeterèŠçŽ ãå«ãŸãªãããä»ã®ãã€ã«æ¯ã¹ãŠã³ã³ããã¹ãå ã®å¯žæ³ãäžããããã«å®çŸ©ãããç¯å²ã§meterèŠçŽ ã䜿çšãããã®ããããã ããã
<p>The grapefruit pie had a radius of 12cm and a height of 2cm.</p> <dl> <dt>Radius: <dd> <meter min=0 max=20 value=12>12cm</meter> <dt>Height: <dd> <meter min=0 max=10 value=2>2cm</meter> </dl>
meterèŠçŽ å
ã®åäœãæå®ããæç€ºçãªæ¹æ³ã¯ãªãããåäœã¯èªç±åœ¢åŒã®ããã¹ãã§title屿§ã«ãããŠæå®ããŠãããã
äžèšã®äŸã¯ãåäœãèšåããããã«æ¡åŒµã§ããïŒ
<dl> <dt>Radius: <dd> <meter min=0 max=20 value=12 title="centimeters">12cm</meter> <dt>Height: <dd> <meter min=0 max=10 value=2 title="centimeters">2cm</meter> </dl>
User agent requirements: User agents must parse the min, max, value, low, high, and optimum
attributes using the rules for parsing floating-point number values.
User agents must then use all these numbers to obtain values for six points on the gauge, as follows. (The order in which these are evaluated is important, as some of the values refer to earlier ones.)
If the min attribute is specified and a value could be
parsed out of it, then the minimum value is that value. Otherwise, the minimum value is
zero.
If the max attribute is specified and a value could be
parsed out of it, then the candidate maximum value is that value. Otherwise, the candidate
maximum value is 1.0.
If the candidate maximum value is greater than or equal to the minimum value, then the maximum value is the candidate maximum value. Otherwise, the maximum value is the same as the minimum value.
If the value attribute is specified and a value could
be parsed out of it, then that value is the candidate actual value. Otherwise, the candidate
actual value is zero.
If the candidate actual value is less than the minimum value, then the actual value is the minimum value.
Otherwise, if the candidate actual value is greater than the maximum value, then the actual value is the maximum value.
Otherwise, the actual value is the candidate actual value.
If the low attribute is specified and a value could be
parsed out of it, then the candidate low boundary is that value. Otherwise, the candidate low
boundary is the same as the minimum value.
If the candidate low boundary is less than the minimum value, then the low boundary is the minimum value.
Otherwise, if the candidate low boundary is greater than the maximum value, then the low boundary is the maximum value.
Otherwise, the low boundary is the candidate low boundary.
If the high attribute is specified and a value could be
parsed out of it, then the candidate high boundary is that value. Otherwise, the candidate high
boundary is the same as the maximum value.
If the candidate high boundary is less than the low boundary, then the high boundary is the low boundary.
Otherwise, if the candidate high boundary is greater than the maximum value, then the high boundary is the maximum value.
Otherwise, the high boundary is the candidate high boundary.
If the optimum attribute is specified and a value
could be parsed out of it, then the candidate optimum point is that value. Otherwise, the
candidate optimum point is the midpoint between the minimum value and the maximum value.
If the candidate optimum point is less than the minimum value, then the optimum point is the minimum value.
Otherwise, if the candidate optimum point is greater than the maximum value, then the optimum point is the maximum value.
Otherwise, the optimum point is the candidate optimum point.
All of which will result in the following inequalities all being true:
UA requirements for regions of the gauge: If the optimum point is equal to the low boundary or the high boundary, or anywhere in between them, then the region between the low and high boundaries of the gauge must be treated as the optimum region, and the low and high parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low boundary, then the region between the minimum value and the low boundary must be treated as the optimum region, the region from the low boundary up to the high boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region. Finally, if the optimum point is higher than the high boundary, then the situation is reversed; the region between the high boundary and the maximum value must be treated as the optimum region, the region from the high boundary down to the low boundary must be treated as a suboptimal region, and the remaining region must be treated as an even less good region.
UA requirements for showing the gauge: When representing a meter
element to the user, the UA should indicate the relative position of the actual value to the
minimum and maximum values, and the relationship between the actual value and the three regions of
the gauge.
次ã®ããŒã¯ã¢ããã¯ïŒ
<h3>Suggested groups</h3>
<ul>
<li>
<p><a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets</a> -
<a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join</a></p>
<p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
</li>
<li>
<p><a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall</a> -
<a href="/group/netscape.public.mozilla.xpinstall/subscribe">join</a></p>
<p>Group description: <strong>Mozilla XPInstall discussion.</strong></p>
<p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
</li>
<li>
<p><a href="/group/mozilla.dev.general/view">mozilla.dev.general</a> -
<a href="/group/mozilla.dev.general/subscribe">join</a></p>
<p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>
</li>
</ul>
ãã®ããã«ã¬ã³ããªã³ã°ãããã ããïŒ

User agents may combine the value of the title attribute and the other attributes to provide context-sensitive
help or inline text detailing the actual values.
ããšãã°ãæ¬¡ã®æçã§ïŒ
<meter min=0 max=60 value=23.2 title=seconds></meter>
1è¡ç®ã«"Value: 23.2 out of 60."ã2è¡ç®ã«"seconds"ãšããããŒã«ãããã䌎ãã±ãŒãžããŠãŒã¶ãŒãšãŒãžã§ã³ãã«è¡šç€ºããããããããªãã
The value IDL attribute, on getting, must
return the actual value. On setting, the given value
must be converted to the best representation of the number as a floating-point number
and then the value content attribute must be set to that
string.
The min IDL attribute, on getting, must return
the minimum value. On setting, the given value must be
converted to the best representation of the number as a floating-point number and
then the min content attribute must be set to that string.
The max IDL attribute, on getting, must return
the maximum value. On setting, the given value must be
converted to the best representation of the number as a floating-point number and
then the max content attribute must be set to that string.
The low IDL attribute, on getting, must return
the low boundary. On setting, the given value must be
converted to the best representation of the number as a floating-point number and
then the low content attribute must be set to that string.
The high IDL attribute, on getting, must return
the high boundary. On setting, the given value must be
converted to the best representation of the number as a floating-point number and
then the high content attribute must be set to that
string.
The optimum IDL attribute, on getting, must
return the optimum value. On setting, the given value
must be converted to the best representation of the number as a floating-point number
and then the optimum content attribute must be set to that
string.
The labels IDL attribute provides a list of the element's
labels.
次ã®äŸã¯ãã²ãŒãžãããŒã«ã©ã€ãºããããŸãã¯æŽåœ¢æžã¿ããã¹ãã«ãã©ãŒã«ããã¯ããæ§åã瀺ãã
<p>Disk usage: <meter min=0 value=170261928 max=233257824>170â261â928 bytes used out of 233â257â824 bytes available</meter></p>
fieldsetèŠçŽ legendèŠçŽ ãdisabled - ãã©ãŒã ã³ã³ãããŒã«ãç¡å¹ã§ãããã©ããform - formèŠçŽ ãšã³ã³ãããŒã«ãé¢é£ä»ããname - ãã©ãŒã éä¿¡ããã³form.elements APIã§äœ¿çšãããã©ãŒã ã³ã³ãããŒã«å groupïŒããã©ã«ã - èšå®ããªãïŒãŸãã¯presentationãaria-*屿§ãinterface HTMLFieldSetElement : HTMLElement {
attribute boolean disabled;
readonly attribute HTMLFormElement? form;
attribute DOMString name;
readonly attribute DOMString type;
readonly attribute HTMLFormControlsCollection elements;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(DOMString error);
};
fieldsetèŠçŽ ã¯ãä»»æã§å
±éã®ååã®äžã«ã°ã«ãŒãåããããã©ãŒã ã³ã³ãããŒã«ã®ã»ããã衚ãã
ã°ã«ãŒãã®ååãããããã°ãfieldsetèŠçŽ ã®åã§ããæåã®legendèŠçŽ ã«ãã£ãŠäžãããããåå«ã®æ®ãã®éšåã¯ãã°ã«ãŒãã圢æããã
disabled屿§ã¯æå®ãããå Žåãããããã°ãç¡å¹ã«ããããã«ãfieldsetèŠçŽ ã®ææããæåã®legendèŠçŽ ã®åã«å±ããåå«ã§ãããã®ãé€ããfieldsetèŠçŽ ã®å
šãã©ãŒã ã³ã³ãããŒã«ã®åå«ãããããã
form屿§ã¯ããã©ãŒã ã®ææè
ãšfieldsetèŠçŽ ãæç€ºçã«é¢é£ä»ããããã«äœ¿çšããããname屿§ã¯èŠçŽ ã®ååã衚ãã
typeæåå"fieldset"ãè¿ãã
elementsèŠçŽ å
ã®ãã©ãŒã ã³ã³ãããŒã«ã®HTMLFormControlsCollectionãè¿ãã
The disabled IDL attribute must
reflect the content attribute of the same name.
The type IDL attribute must return the string
"fieldset".
The elements IDL attribute must return an
HTMLFormControlsCollection rooted at the fieldset element, whose filter
matches listed elements.
The willValidate, validity, and validationMessage attributes, and the checkValidity(), and setCustomValidity() methods, are part of the
constraint validation API. The form and name IDL attributes are part of the element's forms API.
ãã®äŸã¯ãé¢é£ããã³ã³ãããŒã«ã®ã»ãããã°ã«ãŒãåããããã«äœ¿çšãããŠããfieldsetèŠçŽ ã瀺ãïŒ
<fieldset> <legend>Display</legend> <div><label><input type=radio name=c value=0 checked> Black on White</label></div> <div><label><input type=radio name=c value=1> White on Black</label></div> <div><label><input type=checkbox name=g> Use grayscale</label></div> <div><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label></div> <datalist id=contrast> <option label=Normal value=0> <option label=Maximum value=100> </datalist> </fieldset>
äžèšããã³åŸè¿°ã®ã³ãŒãäŸã§äœ¿çšãããdivèŠçŽ ã¯ãä»»æã®ã»ãã³ãã£ãã¯ãäŒããããšãæå³ãããŠããããã°ã«ãŒãåããããã£ãŒã«ãã»ããã³ã³ãããŒã«ã®éã€ã³ã©ã€ã³ã¬ã³ããªã³ã°ãäœæããããã«ã®ã¿äœ¿çšãããã
æ¬¡ã®æçã¯ãfieldsetãæå¹ã§ãããã©ãããå¶åŸ¡ãããå¡äŸå ã§ãã§ãã¯ããã¯ã¹ãæã€ãã£ãŒã«ãã»ããã瀺ããfieldsetèŠçŽ ã®ã³ã³ãã³ãã¯ãå¿ é ã®ããã¹ããã£ãŒã«ããšä»»æã®å¹Ž/æã³ã³ãããŒã«ã§æ§æãããã
<fieldset name="clubfields" disabled> <legend> <label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <div><label>Name on card: <input name=clubname required></label></div> <div><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></div> <div><label>Expiry date: <input name=clubexp type=date></label></div> </fieldset>
fieldsetèŠçŽ ã¯ãŸããã¹ãã§ãããåã®ãã®ã®æ¡åŒµäŸã¯æ¬¡ã®ãšããïŒ
<fieldset name="clubfields" disabled> <legend> <label> <input type=checkbox name=club onchange="form.clubfields.disabled = !checked"> Use Club Card </label> </legend> <div><label>Name on card: <input name=clubname required></label></div> <fieldset name="numfields"> <legend> <label> <input type=radio checked name=clubtype onchange="form.numfields.disabled = !checked"> My card has numbers on it </label> </legend> <div><label>Card number: <input name=clubnum required pattern="[-0-9]+"></label></div> </fieldset> <fieldset name="letfields" disabled> <legend> <label> <input type=radio name=clubtype onchange="form.letfields.disabled = !checked"> My card has letters on it </label> </legend> <div><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></> </fieldset> </fieldset>
ãã®äŸã«ãããŠãå€åŽã®"Use Club Card"ãã§ãã¯ããã¯ã¹ããã§ãã¯ãããªãå Žåã2ã€ã®ãã¹ããããfieldsetã®legendã§2ã€ã®ã©ãžãªãã¿ã³ãå«ããå€åŽã®fieldsetå
éšã®ãã¹ãŠã¯ç¡å¹ã«ãªãããããããã§ãã¯ããã¯ã¹ããã§ãã¯ãããå Žåãã©ãžãªãã¿ã³ãäž¡æ¹ãšãæå¹ã«èšå®ãããæå¹ã«ãããã2ã€ã®å
éšfieldsetã®ã©ã¡ããéžæã§ããããã«ãªãã
legendèŠçŽ fieldsetèŠçŽ ã®æåã®åãšããŠãaria-*屿§ãinterface HTMLLegendElement : HTMLElement {
readonly attribute HTMLFormElement? form;
};
The legend element represents a caption for the rest of the contents
of the legend element's parent fieldset element, if
any.
formååšãããªãã°ãèŠçŽ ã®formèŠçŽ ãè¿ãããŸãã¯ããã§ãªããã°nullãè¿ãã
The form IDL attribute's behavior depends on
whether the legend element is in a fieldset element or not. If the
legend has a fieldset element as its parent, then the form IDL attribute must return the same value as the form IDL attribute on that fieldset element. Otherwise,
it must return null.
ãã©ãŒã ã³ã³ãããŒã«ã¯ãå€ãšcheckednessãæã€ãïŒåŸè
ã¯ãinputèŠçŽ ã«ãã£ãŠã®ã¿äœ¿çšããããïŒãããã¯ããŠãŒã¶ãŒãã³ã³ãããŒã«ãšå¯Ÿè©±ããæ¹æ³ãèšè¿°ããããã«äœ¿çšãããã
inputèŠçŽ ã®multiple屿§ã«çŽé¢ããå¶çŽããªããŒã·ã§ã³ã®åäœãå®çŸ©ããããã«ãinputèŠçŽ ã¯ãŸããå¥ã
ã«å®çŸ©ãããè€æ°ã®å€ãæã€ããšãã§ããã
ãã©ãŒã ã³ã³ãããŒã«ã¯mutableãšããŠæå®ããããšãã§ããã
ããã¯ããŠãŒã¶ãŒããã©ãŒã ã³ã³ãããŒã«ã®å€ãŸãã¯checkednessã倿Žã§ãããã©ããããŸãã¯ã³ã³ãããŒã«ãèªåçã«äºåå ¥åã§ãããã©ãããïŒèŠçŽ ãæå®ãããããšãªããããšäŸåããæ¬ä»æ§ã§ã®å®çŸ©åã³èŠä»¶ã«ãã£ãŠïŒå€å®ããã
ãã©ãŒã é¢é£èŠçŽ ã¯ãèŠçŽ ã®ãã©ãŒã ææè
ãšåŒã°ããformèŠçŽ ãšã®é¢ä¿ãæã€ããšãã§ããããã©ãŒã é¢é£èŠçŽ ãformèŠçŽ ã«é¢é£ä»ããããªãå Žåããã®ãã©ãŒã ææè
ã¯nullã§ãããšèšãããã
A form-associated element is, by default, associated with its nearest ancestor form element (as described
below), but, if it is reassociateable, may have a
form attribute specified to override this.
ãã®æ©èœã¯ãèè
ããã¹ããããformèŠçŽ ã«å¯ŸãããµããŒãã®äžè¶³ãåé¿ããããšãã§ããã
åé¢é£ä»ãå¯èœãã©ãŒã é¢é£èŠçŽ ãæå®ãããform屿§ãæã€å Žåããã®å±æ§ã®å€ã¯ããã®èŠçŽ ã®ææè
Documentã§formèŠçŽ ã®IDã§ãªããã°ãªããªãã
The rules in this section are complicated by the fact that although conforming
documents will never contain nested form elements, it is quite possible (e.g. using a
script that performs DOM manipulation) to generate documents that have such nested elements. They
are also complicated by rules in the HTML parser that, for historical reasons, can result in a
form-associated element being associated with a form element that is not
its ancestor.
When a form-associated element is created, its form owner must be initialized to null (no owner).
When a form-associated element is to be associated with a form, its form owner must be set to that form.
When a form-associated element or one of its ancestors is inserted into a Document, then the user agent must
reset the form owner of that form-associated element. The HTML parser overrides this requirement when inserting form
controls.
When an element is removed from a
Document resulting in a form-associated element and its
form owner (if any) no longer being in the same home subtree, then the
user agent must reset the form owner of that form-associated
element.
When a reassociateable form-associated
element's form attribute is set, changed, or removed,
then the user agent must reset the form owner of that element.
When a reassociateable form-associated
element has a form attribute and the ID of any of the elements in the Document changes, then the
user agent must reset the form owner of that form-associated
element.
When a reassociateable form-associated
element has a form attribute and an element with an
ID is inserted
into or removed from the
Document, then the user agent must reset the form owner of that
form-associated element.
When the user agent is to reset the form owner of a form-associated element, it must run the following steps:
If the element's form owner is not null, and either the element is not reassociateable or its form
content attribute is not present, and the element's form owner is its nearest
form element ancestor after the change to the ancestor chain, then do nothing, and
abort these steps.
Let the element's form owner be null.
If the element is reassociateable, has a form content attribute, and is itself in a Document, then run these substeps:
If the first element in the Document to
have an ID that is case-sensitively equal to the element's form content attribute's value is a form element,
then associate the form-associated
element with that form element.
Abort the "reset the form owner" steps.
Otherwise, if the form-associated element in question has an ancestor
form element, then associate the
form-associated element with the nearest such ancestor form
element.
Otherwise, the element is left unassociated.
In the following non-conforming snippet:
...
<form id="a">
<div id="b"></div>
</form>
<script>
document.getElementById('b').innerHTML =
'<table><tr><td><form id="c"><input id="d"></table>' +
'<input id="e">';
</script>
...
The form owner of "d" would be the inner nested form "c", while the form owner of "e" would be the outer form "a".
This happens as follows: First, the "e" node gets associated with "c" in the HTML
parser. Then, the innerHTML algorithm moves the nodes
from the temporary document to the "b" element. At this point, the nodes see their ancestor chain
change, and thus all the "magic" associations done by the parser are reset to normal ancestor
associations.
This example is a non-conforming document, though, as it is a violation of the content models
to nest form elements.
formèŠçŽ ã®ãã©ãŒã ææè ãè¿ãã
ååšããªãå Žånullãè¿ãã
Reassociateable form-associated elements have a form
IDL attribute, which, on getting, must return the element's form owner, or null if
there isn't one.
name屿§nameã³ã³ãã³ã屿§ã¯ããã©ãŒã ã®éä¿¡ãformèŠçŽ ã®elementsãªããžã§ã¯ãã§äœ¿çšããããããªããã©ãŒã ã³ã³ãããŒã«ã®ååãäžããã屿§ãæå®ãããå Žåããã®å€ã¯ç©ºã®æååã§ãã£ãŠã¯ãªããªãã
nameã«å¯ŸããŠä»»æã®ç©ºã§ãªãå€ãèš±å¯ãããããåå"_charset_"ãš"isindex"ã¯ç¹å¥ã§ããïŒ
isindexapplication/x-www-form-urlencodedã¡ã«ããºã ã䜿çšããŠéä¿¡ããããã©ãŒã ã®æåã®ã³ã³ãããŒã«ã§Textã³ã³ãããŒã«ã®ååãšããŠäœ¿çšãããå Žåããã®å€ã¯ãååãªãã§ããã®ã³ã³ãããŒã«ã®å€ãã®ã¿ãå«ãéä¿¡ãåŒãèµ·ããã
_charset_value屿§ã®ãªãHiddenã³ã³ãããŒã«ã®ååãšããŠäœ¿çšãããå Žåããã®å€ã¯ãéä¿¡æåãšã³ã³ãŒãã£ã³ã°ããæãéä¿¡ã®éã®å€ãèªåçã«äžããããã
dirname屿§dirname屿§ã¯èŠçŽ ã®æ¹åã®éä¿¡ãæå¹ã«ãããã©ãŒã éä¿¡ã®éã«ãã®å€ãå«ããã£ãŒã«ãåãäžããããã®ãããªå±æ§ãæå®ãããå Žåããã®å€ã¯ç©ºæååã§ãã£ãŠã¯ãªããªãã
ãã®äŸã«ãããŠããã©ãŒã ã¯ããã¹ããã£ãŒã«ããšéä¿¡ãã¿ã³ãå«ãïŒ
<form action="addcomment.cgi" method=post> <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p> <p><button name="mode" type=submit value="add">Post Comment</button></p> </form>
ãŠãŒã¶ãŒããã©ãŒã ãéä¿¡ããéããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ã"comment"ã"comment.dir"ã"mode"ãšåŒã°ãã3ã€ã®ãã£ãŒã«ããå«ãããã£ãŠããŠãŒã¶ãŒã"Hello"ãæã¡èŸŒãã å Žåãéä¿¡ããã£ã¯ãã®ããã«ãªããããããªãïŒ
comment=Hello&comment.dir=ltr&mode=add
ãŠãŒã¶ãŒãæåã§å³ããå·Šãžèšè¿°æ¹åã«åãæ¿ãã"Ù Ø±ØØšÙا"ãå ¥åããå Žåãéä¿¡æ¬äœã¯ãã®ããã«ãªããããããªãïŒ
comment=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7&comment.dir=rtl&mode=add
maxlength屿§dirty value flagã«ãã£ãŠå¶åŸ¡ãããããã©ãŒã ã³ã³ãããŒã«maxlength屿§ã¯ããŠãŒã¶ãŒãå
¥åã§ããæåæ°ã®å¶éã宣èšããã
èŠçŽ ããã©ãŒã ã³ã³ãããŒã«maxlength屿§ãæå®ãããå Žåã屿§å€ã¯åŠ¥åœãªéè² ã®æŽæ°ã§ãªããã°ãªããªãã屿§ãæå®ãããæ°ããããããã®å€ã«éè² æŽæ°ãè§£æããããã®èŠåãé©çšããå Žåããã®æ°ã¯èŠçŽ ã®æå€§èš±å®¹å€ã®é·ãã§ããã屿§ãçç¥ããããŸãã¯ãã®å€ãè§£æããšã©ãŒãšãªãå Žåãæå€§èš±å®¹å€ã®é·ãã¯ååšããªãã
Constraint validation: If an element has a maximum allowed value length, its dirty value flag is true, its value was last changed by a user edit (as opposed to a change made by a script), and the code-unit length of the element's value is greater than the element's maximum allowed value length, then the element is suffering from being too long.
User agents may prevent the user from causing the element's value to be set to a value whose code-unit length is greater than the element's maximum allowed value length.
minlength屿§dirty value flagã«ãã£ãŠå¶åŸ¡ããããã©ãŒã ã³ã³ãããŒã«minlength屿§ã¯ããŠãŒã¶ãŒãå
¥åã§ããæåæ°ã®äžéã宣èšããã
minlength屿§ã¯required屿§ãæç€ºããªãããã©ãŒã ã³ã³ãããŒã«ãäžåminlength屿§ãæããªãå Žåãå€ã¯äŸç¶ãšããŠçç¥ã§ãããminlength屿§ã¯ããŠãŒã¶ãŒããã¹ãŠå€ãå
¥åããåŸã«ã®ã¿è¹Žãã空æååãèš±å¯ãããªãå Žåãrequired屿§ãèšå®ããå¿
èŠãããã
èŠçŽ ããã©ãŒã ã³ã³ãããŒã«minlength屿§ãæå®ãããå Žåã屿§å€ã¯åŠ¥åœãªéè² ã®æŽæ°ã§ãªããã°ãªããªãã屿§ãæå®ãããæ°ããããããã®å€ã«éè² æŽæ°ãè§£æããããã®èŠåãé©çšããå Žåããã®æ°ã¯èŠçŽ ã®æå°èš±å®¹å€ã®é·ãã§ããã屿§ãçç¥ããããŸãã¯ãã®å€ãè§£æããšã©ãŒãšãªãå Žåãæå°èš±å®¹å€ã®é·ãã¯ååšããªãã
èŠçŽ ãæå€§èš±å®¹å€ã®é·ããšæå°èš±å®¹å€ã®é·ãã®äž¡æ¹ãæã€å Žåãæå°èš±å®¹å€ã®é·ãã¯æå€§èš±å®¹å€ã®é·ã以äžã§ãªããã°ãªããªãã
Constraint validation: If an element has a minimum allowed value length, its value is not the empty string, and the code-unit length of the element's value is less than the element's minimum allowed value length, then the element is suffering from being too short.
ãã®äŸã«ãããŠã4ã€ã®ããã¹ããã£ãŒã«ããååšããã1ã€ãã¯å¿ é ã§ãããå°ãªããšã5æåã§ããå¿ èŠããããä»ã®3ã€ã¯ä»»æã ãããŠãŒã¶ãŒã¯1ã€ãèšå ¥ããå ŽåããŠãŒã¶ãŒã¯å°ãªããšã10æåãå ¥åããå¿ èŠãããã
<form action="/events/menu.cgi" method="post">
<p><label>Name of Event: <input required minlength=5 maxlength=50 name=event></label></p>
<p><label>Describe what you would like for breakfast, if anything:
<textarea name="breakfast" minlength="10"></textarea></label></p>
<p><label>Describe what you would like for lunch, if anything:
<textarea name="lunch" minlength="10"></textarea></label></p>
<p><label>Describe what you would like for dinner, if anything:
<textarea name="dinner" minlength="10"></textarea></label></p>
<p><input type=submit value="Submit Request"></p>
</form>
disabled屿§disabledã³ã³ãã³ã屿§ã¯ãçåœå±æ§ã§ããã
ãã©ãŒã ã³ã³ãããŒã«ã®disabled屿§ãèšå®ãããå ŽåããŸãã¯ãã©ãŒã ã³ã³ãããŒã«ãdisabled屿§ãèšå®ãããfieldsetèŠçŽ ã®åå«ã§ããããã€ããããã°ãã®fieldsetèŠçŽ ã®ææããæåã®legendèŠçŽ ã®åã«å±ããåå«ã§ãªãå Žåããã©ãŒã ã³ã³ãããŒã«ã¯ç¡å¹ã§ããã
A form control that is disabled must prevent any click events that are queued on the
user interaction task source from being dispatched on the element.
Constraint validation: If an element is disabled, it is barred from constraint validation.
The disabled IDL attribute must
reflect the disabled content attribute.
ãã©ãŒã éä¿¡ã®ããã®å±æ§ã¯ãformèŠçŽ äžãšéä¿¡ãã¿ã³äžïŒãã©ãŒã éä¿¡ãã¿ã³ã衚ãèŠçŽ ãããšãã°ãtype屿§ã®inputèŠçŽ ãSubmit Buttonç¶æ
ã«ããïŒã®äž¡æ¹ãæå®ã§ããã
formèŠçŽ ã§æå®ãããŠããããã©ãŒã éä¿¡ã®ããã®å±æ§ã¯ãactionãenctypeãmethodãnovalidateãtargetã§ããã
éä¿¡ãã¿ã³ã§æå®ãããŠããã察å¿ãããã©ãŒã éä¿¡ã®ããã®å±æ§ã¯ãformactionãformenctypeãformmethodãformnovalidateãformtargetã§ãããçç¥ããå Žåããããã¯formèŠçŽ ã®å¯Ÿå¿ãã屿§ã§æå®ãããå€ãããã©ã«ããšããã
æå®ãããå Žåãactionããã³formactionã³ã³ãã³ã屿§ã¯ãæœåšçã«ã¹ããŒã¹ã§å²ãŸãã劥åœãªç©ºã§ãªãURLã§ããå€ãæããªããã°ãªããªãã
èŠçŽ ãéä¿¡ãã¿ã³ã§ãããã€ãã®ãããªå±æ§ãæã€å ŽåãèŠçŽ ã®actionã¯ãã®èŠçŽ ã®formaction屿§å€ã§ãããããªãã¡actionããã®ãããªå±æ§ãæã€å Žåããã®ãã©ãŒã ææè
ã®action屿§å€ã§ãããããã§ãªããã°ç©ºæååã§ããã
methodããã³formmethodã³ã³ãã³ã屿§ä»¥äžã®ããŒã¯ãŒãããã³ç¶æ
ããã€åæå±æ§ã§ããïŒ
getã¯ãç¶æ
GETã«å¯Ÿå¿ããHTTP GETã¡ãœããã瀺ããpostã¯ãç¶æ
POSTã«å¯Ÿå¿ããHTTP POSTã¡ãœããã瀺ããããã屿§ã«å¯Ÿããç¡å¹å€ã®ããã©ã«ãã¯ãGETç¶æ
ã§ãããmethod屿§ã®å¯Ÿããæ¬ æå€ã®ããã©ã«ãããŸãGETç¶æ
ã§ãããïŒformmethod屿§ã«å¯Ÿããæ¬ æå€ã®ããã©ã«ãã¯ååšããªããïŒ
èŠçŽ ã®ã¡ãœããã¯ãããã®ç¶æ
ã®ããããã§ãããèŠçŽ ãéä¿¡ãã¿ã³ã§ãããã€formmethod屿§ãæã€å ŽåãèŠçŽ ã®ã¡ãœããã¯ãã®å±æ§ã®ç¶æ
ã§ãããããã§ãªããã°ããã©ãŒã ææè
ã®method屿§ç¶æ
ã§ããã
ããã§æ€çŽ¢ã¯ãšãªãURLã«æåºãããããã«ãmethod屿§ã¯æç€ºçã«ããã©ã«ãå€"get"ãæå®ããããã«äœ¿çšãããïŒ
<form method="get" action="/search.cgi"> <p><label>Search terms: <input type=search name=q></label></p> <p><input type=submit></p> </form>
äžæ¹ã§ããŠãŒã¶ãŒã®ã¡ãã»ãŒãžãHTTPãªã¯ãšã¹ãã®ããã£ã«éä¿¡ãããããã«ãããã§method屿§ã¯ãå€"post"ãæå®ããããã«äœ¿çšãããïŒ
<form method="post" action="/post-message.cgi"> <p><label>Message: <input type=text name=m></label></p> <p><input type=submit value="Submit message"></p> </form>
enctypeããã³formenctypeã³ã³ãã³ã屿§ä»¥äžã®ããŒã¯ãŒãããã³ç¶æ
ããã€åæå±æ§ã§ããïŒ
application/x-www-form-urlencoded"ããŒã¯ãŒãããã³å¯Ÿå¿ããç¶æ
ãmultipart/form-data"ããŒã¯ãŒãããã³å¯Ÿå¿ããç¶æ
ãtext/plain"ããŒã¯ãŒãããã³å¯Ÿå¿ããç¶æ
ãããã屿§ã«å¯Ÿããç¡å¹å€ã®ããã©ã«ãã¯ãapplication/x-www-form-urlencodedç¶æ
ã§ãããenctype屿§ã«å¯Ÿããæ¬ æå€ã®ããã©ã«ãã¯ãŸããapplication/x-www-form-urlencodedç¶æ
ã§ãããïŒformenctype屿§ã«å¯Ÿããæ¬ æå€ã®ããã©ã«ãã¯ååšããªããïŒ
èŠçŽ ã®enctypeã¯ãããã®ç¶æ
ã®ããããã§ãããèŠçŽ ãéä¿¡ãã¿ã³ã§ãããã€formenctype屿§ãæã€å ŽåãèŠçŽ ã®enctypeã¯ãã®å±æ§ã®ç¶æ
ã§ãããããã§ãªããã°ããã©ãŒã ææè
ã®enctype屿§ç¶æ
ã§ããã
æå®ãããå Žåãtargetããã³formtargetã³ã³ãã³ã屿§ã¯ã劥åœãªã³ã³ãã³ãåãŸãã¯ããŒã¯ãŒãã§ããå€ãæããªããã°ãªããªãã
èŠçŽ ãéä¿¡ãã¿ã³ã§ãããã®ãããªå±æ§ãæã€å ŽåãèŠçŽ ã®ã¿ãŒã²ããã¯èŠçŽ ã®formtarget屿§ã®å€ã§ãããããããã®ãããªå±æ§ãæã€å ŽåããŸãã¯ããã®ãã©ãŒã ææè
ã®target屿§ã®å€ã§ããããŸãã¯Documentãtarget屿§ããã€baseèŠçŽ ãå«ãå Žåãæåã®ãã®ãããªbaseèŠçŽ ã®target屿§ã®å€ã§ããããã®ãããªèŠçŽ ãååšããªãå Žåã空æååã§ããã
novalidateããã³formnovalidate屿§ã¯çåœå±æ§ã§ãããååšããå Žåããã©ãŒã ãéä¿¡æã«æ€èšŒãããªãããšã瀺ãã
èŠçŽ ãéä¿¡ãã¿ã³ã§ãããã€èŠçŽ ã®formnovalidate屿§ãååšããå ŽåããŸãã¯èŠçŽ ã®ãã©ãŒã ææè
ã®novalidate屿§ãååšããå ŽåãèŠçŽ ã®no-validate stateã¯trueã§ãããããã§ãªããã°falseã§ããã
屿§ããã©ãŒã ã§ããŒã¿ãå®å šã«å ¥åããŠããªãã«ããããããããŠãŒã¶ãŒãèªåã®é²æç¶æ³ãä¿åã§ããããã«ããã®å±æ§ã¯æ€èšŒã®å¶çŽãæã€ãã©ãŒã äžã®ãã¿ã³"ä¿å"ãå«ãããšäŸ¿å©ã§ãããæ¬¡ã®äŸã¯ã2ã€ã®å¿ é ãã£ãŒã«ããæã€åçŽãªãã©ãŒã ã瀺ãã3ã€ã®ãã¿ã³ãããã1ã€ã¯ãäž¡æ¹ã®ãã£ãŒã«ãã«å€ãå ¥åãããŠããå¿ èŠããããã©ãŒã ãæåºããããã®ãã®ã1ã€ã¯ãŠãŒã¶ãŒãæ»ã£ãŠããŠãåŸã§åããããšãã§ããããã«ãã©ãŒã ãä¿åããããã®ãã®ã1ã€ã¯å®å šã«ãã©ãŒã ããã£ã³ã»ã«ããããã®ãã®ã§ããã
<form action="editor.cgi" method="post"> <p><label>Name: <input required name=fn></label></p> <p><label>Essay: <textarea required name=essay></textarea></label></p> <p><input type=submit name=submit value="Submit essay"></p> <p><input type=submit formnovalidate name=save value="Save essay"></p> <p><input type=submit formnovalidate name=cancel value="Cancel"></p> </form>
The action IDL attribute must
reflect the content attribute of the same name, except that on getting, when the
content attribute is missing or its value is the empty string, the document's address
must be returned instead. The target IDL attribute
must reflect the content attribute of the same name. The method and enctype IDL attributes must reflect the
respective content attributes of the same name, limited to only known values. The
encoding IDL attribute must reflect
the enctype content attribute, limited to only known
values. The noValidate IDL attribute must
reflect the novalidate content attribute. The
formAction IDL attribute must
reflect the formaction content attribute,
except that on getting, when the content attribute is missing or its value is the empty string,
the document's address must be returned instead. The formEnctype IDL attribute must reflect
the formenctype content attribute, limited to only
known values. The formMethod IDL
attribute must reflect the formmethod content
attribute, limited to only known values. The formNoValidate IDL attribute must
reflect the formnovalidate content
attribute. The formTarget IDL attribute must
reflect the formtarget content attribute.
autofocus屿§autofocusã³ã³ãã³ã屿§ã¯ãããŒãžãèªã¿èŸŒãŸãããšããã«ãã³ã³ãããŒã«ããã©ãŒã«ã¹ããããšãèè
ã«èš±å¯ãããŠãŒã¶ãŒãæåã§ã¡ã€ã³ã³ã³ãããŒã«ã«ãã©ãŒã«ã¹ããããšãªãã«å
¥åãããã«éå§ã§ããããã«ããã
autofocus屿§ã¯çåœå±æ§ã§ããã
èŠçŽ ã®çŽè¿ã®ç¥å ãªãŒããã©ãŒã«ã¹ç¯å²ã®ã«ãŒãèŠçŽ ã¯ãèŠçŽ ã®ã«ãŒãèŠçŽ ã§ããã
äž¡æ¹ãautofocus屿§ãæå®ãããåãçŽè¿ã®ç¥å
ãªãŒããã©ãŒã«ã¹ç¯å²ã®ã«ãŒãèŠçŽ ããã€2ã€ã®èŠçŽ ãååšããŠã¯ãªããªãã
When an element with the autofocus attribute specified
is inserted into a document, user agents
should run the following steps:
Let target be the element's Document.
If target has no browsing context, abort these steps.
If target's browsing context has no top-level browsing context (e.g. it is a nested browsing context with no parent browsing context), abort these steps.
If target's active sandboxing flag set has the sandboxed automatic features browsing context flag, abort these steps.
If target's origin is not the same as the origin of the Document of the currently
focused element in target's top-level browsing context, abort
these steps.
If target's origin is not the same as the origin of the active document of target's top-level browsing context, abort these steps.
If the user agent has already reached the last step of this list of steps in response to
an element being inserted into a
Document whose top-level browsing context's active
document is the same as target's top-level browsing
context's active document, abort these steps.
If the user has indicated (for example, by starting to type in a form control) that he does not wish focus to be changed, then optionally abort these steps.
Queue a task that checks to see if the element is focusable, and if so, runs the focusing steps for that element. User agents may also change the scrolling position of the document, or perform some other action that brings the element to the user's attention. The task source for this task is the user interaction task source.
This handles the automatic focusing during document load.
Focusing the control does not imply that the user agent must focus the browser window if it has lost focus.
The autofocus IDL attribute must
reflect the content attribute of the same name.
æ¬¡ã®æçã«ãããŠãææžãèªã¿èŸŒãŸãããšããããã¹ãã³ã³ãããŒã«ã«ãã©ãŒã«ã¹ãããã
<input maxlength="256" name="q" value="" autofocus> <input type="submit" value="Search">
autocomplete屿§ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãããšãã°ä»¥åã®ãŠãŒã¶ãŒå
¥åã«åºã¥ããŠãŒã¶ãŒã®ã¢ãã¬ã¹ãäºåã«å
¥åãããªã©ããŠãŒã¶ãŒã«ãã©ãŒã ã®èšå
¥ãå©ããããã®æ©èœãæã€ããšããããautocompleteã³ã³ãã³ã屿§ã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ããžã®ãã³ãã®ææ®µã«ããŸãã¯å®éã«ãã®ãããªæ©èœãæäŸãããã©ããã«äœ¿çšã§ããã
屿§ãååšããå Žåã¯ãæåå"off"ã«ASCII倧æåã»å°æåäžåºå¥ã§äžèŽããå€ããŸãã¯æåå"on"ã«ASCII倧æåã»å°æåäžåºå¥ã§äžèŽããåäžããŒã¯ã³ã§ããå€ãæããªããã°ãªããªãã
"off"ããŒã¯ãŒãã¯ãã³ã³ãããŒã«ã®å
¥åããŒã¿ãç¹ã«ã»ã³ã·ãã£ãïŒããšãã°ãæ žå
µåšã®ã¢ã¯ãã£ããŒã·ã§ã³ã³ãŒãïŒã§ããããŸãã¯ããŒã¯ãŒããåå©çšãããããšã®ãªãå€ïŒããšãã°ãéè¡ã®ãã°ã€ã³ã®ããã®ã¯ã³ã¿ã€ã ããŒïŒã§ããããããã£ãŠãŠãŒã¶ãŒã¯ãå€ãäºåå
¥åããããã«ãŠãŒã¶ãŒãšãŒãžã§ã³ããåœãŠã«ã§ãã代ããã«ãæç€ºçã«ããŒã¿ãæ¯åå
¥åããå¿
èŠãããããŸãã¯ææžã¯ç¬èªã®ãªãŒãã³ã³ããªãŒãã®ã¡ã«ããºã ãæäŸãããŠãŒã¶ãŒãšãŒãžã§ã³ãã«èªåè£å®å€ãæäŸããããªãããšã®ããããã瀺ãã
"on"ããŒã¯ãŒãã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ããããªãŒãã³ã³ããªãŒãå€ããŠãŒã¶ãŒã«æäŸããããšãèš±å¯ãããããŠãŒã¶ãŒãå
¥åãããšäºæ³ãããã ããããŒã¿ã®çš®é¡ã«ã€ããŠã®ãããªãæ
å ±ãæäŸããªãããšã瀺ãããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãèªåè£å®ãææ¡ããå€ã決å®ããããã«ãã¥ãŒãªã¹ãã£ãã¯ã䜿çšããå¿
èŠãããã ããã
autocomplete屿§ãçç¥ãããå ŽåãèŠçŽ ã®ãã©ãŒã ææè
ã®autocomplete屿§ã«é¢ããç¶æ
ã«å¯Ÿå¿ããããã©ã«ãå€ãïŒ"on"ãŸãã¯"off"ã®ããããïŒã®ä»£ããã«äœ¿çšãããããã©ãŒã ææè
ãååšããªãå Žåãå€"on"ã䜿çšãããã
When an element's autofill field name is "off", the user agent should not remember the control's
value, and should not offer past values to the user.
In addition, when an element's autofill field name is "off", values are reset
when traversing the history.
Banks frequently do not want UAs to prefill login information:
<p><label>Account: <input type="text" name="ac" autocomplete="off"></label></p> <p><label>PIN: <input type="password" name="pin" autocomplete="off"></label></p>
When an element's autofill field name is not "off", the user agent may store the control's value, and may offer previously stored values to the user.
When the autofill field name is "on",
the user agent should attempt to use heuristics to determine the most appropriate values to offer
the user, e.g. based on the element's name value, the position
of the element in the document's DOM, what other fields exist in the form, and so forth.
ãªãŒãã³ã³ããªãŒãæ©æ§ã¯ããããããŠãŒã¶ãŒãèŠçŽ ã®å€ãä¿®æ£ãããã®ããã«ãŠãŒã¶ãŒãšãŒãžã§ã³ãã®æ¯ããŸãã«ãã£ãŠå®è£ ãããªããã°ãªãããèŠçŽ ãmutableã§ããå Žæã§ããæéã«å®è¡ãããªããã°ãªããªããïŒããšãã°ãèŠçŽ ãææžã«æ¿å ¥ãããçŽåŸããŸãã¯ãŠãŒã¶ãŒãšãŒãžã§ã³ããè§£æã忢ããéïŒããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãã¯ããŠãŒã¶ãŒãå ¥åãããããããªãå€ã䜿çšããã³ã³ãããŒã«ã®ã¿ãäºåå ¥åããªããã°ãªããªãã
A user agent prefilling a form control's value must not cause that control to suffer from a type mismatch, suffer from a pattern mismatch, suffer from being too long, suffer from being too short, suffer from an underflow, suffer from an overflow, or suffer from a step mismatch. Where possible given the control's constraints, user agents must use the format given as canonical in the aforementioned table. Where it's not possible for the canonical format to be used, user agents should use heuristics to attempt to convert values so that they can be used.
A user agent may allow the user to override an element's autofill field name, e.g.
to change it from "off" to "on" to allow values to be remembered and prefilled despite
the page author's objections, or to always "off",
never remembering values. However, user agents should not allow users to trivially override the
autofill field name from "off" to
"on" or other values, as there are significant
security implications for the user if all values are always remembered, regardless of the site's
preferences.
The autocomplete IDL attribute, on getting,
must return the element's IDL-exposed autofill value, and on setting, must
reflect the content attribute of the same name.
inputããã³textareaèŠçŽ ã¯ã»ã¬ã¯ã·ã§ã³ãæ±ãDOMã€ã³ã¿ãŒãã§ãŒã¹ã§ä»¥äžã®ã¡ã³ããŒãå®çŸ©ããïŒ
void select();
attribute unsigned long selectionStart;
attribute unsigned long selectionEnd;
attribute DOMString selectionDirection;
void setRangeText(DOMString replacement);
void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction = "preserve");
setRangeTextã¡ãœããã¯ä»¥äžã®åæåã䜿çšããïŒ
enum SelectionMode {
"select",
"start",
"end",
"preserve" // default
};
ãããã¡ãœãããšå±æ§ã¯ãinputããã³textareaããã¹ããã£ãŒã«ãã®ã»ã¬ã¯ã·ã§ã³ãå
¬éãå¶åŸ¡ããã
select()ããã¹ããã£ãŒã«ãã«ããããã¹ãŠãéžæããã
selectionStart [ = value ]ã»ã¬ã¯ã·ã§ã³ã®éå§ãªãã»ãããè¿ãã
ã»ã¬ã¯ã·ã§ã³ã®éå§ã倿Žããèšå®ãå¯èœã§ããã
selectionEnd [ = value ]ã»ã¬ã¯ã·ã§ã³ã®çµäºãªãã»ãããè¿ãã
ã»ã¬ã¯ã·ã§ã³ã®çµäºã倿Žããèšå®ãå¯èœã§ããã
selectionDirection [ = value ]ã»ã¬ã¯ã·ã§ã³ã®çŸåšã®æ¹åãè¿ãã
ã»ã¬ã¯ã·ã§ã³ã®çŸåšã®æ¹åã倿Žããèšå®ãå¯èœã§ããã
å¯èœãªå€ã¯ã"forward"ã"backward"ã"none"ã§ããã
setSelectionRange(start, end [, direction] )æå®ãããæ¹åã«æå®ãããéšååãã«ããŒããããã«éžæã倿Žãããæ¹åãçç¥ãããå Žåãæ¹åããã©ãããã©ãŒã ã®ããã©ã«ãïŒãªããŸãã¯åæ¹ïŒã«ãªãããã«ãªã»ãããããã
setRangeText(replacement [, start, end [, selectionMode ] ] )æ°ããããã¹ããšãšãã«ããã¹ãã®ç¯å²ã眮æãããstartããã³endåŒæ°ãæäŸãããªãå Žåãç¯å²ã¯éžæãããããšãæ³å®ãããã
æåŸã®åŒæ°ã¯ãããã¹ãã亀æããåŸã«éžæãèšå®ãããã¹ãã§ããããæ±ºå®ãããå¯èœãªå€ã¯æ¬¡ã®ãšããïŒ
select"start"end"preserve"For input elements, calling these methods while they don't apply, and getting or setting these attributes while they don't apply, must throw an InvalidStateError exception. Otherwise, they
must act as described below.
For input elements, these methods and attributes must operate on the element's
value. For textarea elements, these methods and
attributes must operate on the element's raw
value.
Where possible, user interface features for changing the text selection in input
and textarea elements must be implemented in terms of the DOM API described in this
section, so that, e.g., all the same events fire.
The selections of input and textarea elements have a
direction, which is either forward, backward, or none. This direction
is set when the user manipulates the selection. The exact meaning of the selection direction
depends on the platform.
On Windows, the direction indicates the position of the caret relative to the selection: a forward selection has the caret at the end of the selection and a backward selection has the caret at the start of the selection. Windows has no none direction. On Mac, the direction indicates which end of the selection is affected when the user adjusts the size of the selection using the arrow keys with the Shift modifier: the forward direction means the end of the selection is modified, and the backwards direction means the start of the selection is modified. The none direction is the default on Mac, it indicates that no particular direction has yet been selected. The user sets the direction implicitly when first adjusting the selection, based on which directional arrow key was used.
The select() method must cause the
contents of the text field to be fully selected, with the selection direction being none, if the
platform support selections with the direction none, or otherwise forward. The user
agent must then queue a task to fire a simple event that bubbles named
select at the element, using the user interaction task
source as the task source.
The selectionStart attribute
must, on getting, return the offset (in logical order) to the character that immediately follows
the start of the selection. If there is no selection, then it must return the offset (in logical
order) to the character that immediately follows the text entry cursor.
On setting, it must act as if the setSelectionRange() method had been called,
with the new value as the first argument; the current value of the selectionEnd attribute as the second argument,
unless the current value of the selectionEnd
is less than the new value, in which case the second argument must also be the new value; and the
current value of the selectionDirection
as the third argument.
The selectionEnd attribute
must, on getting, return the offset (in logical order) to the character that immediately follows
the end of the selection. If there is no selection, then it must return the offset (in logical
order) to the character that immediately follows the text entry cursor.
On setting, it must act as if the setSelectionRange() method had been called,
with the current value of the selectionStart attribute as the first argument,
the new value as the second argument, and the current value of the selectionDirection as the third argument.
The selectionDirection
attribute must, on getting, return the string corresponding to the current selection direction: if
the direction is forward, "forward"; if the direction is
backward, "backward"; and otherwise, "none".
On setting, it must act as if the setSelectionRange() method had been called,
with the current value of the selectionStart attribute as the first argument,
the current value of the selectionEnd
attribute as the second argument, and the new value as the third argument.
The setSelectionRange(start, end, direction) method
must set the selection of the text field to the sequence of characters starting with the character
at the startth position (in logical order) and ending with the character at
the (end-1)th position. Arguments greater than the
length of the value of the text field must be treated as pointing at the end of the text field. If
end is less than or equal to start then the start of the
selection and the end of the selection must both be placed immediately before the character with
offset end. In UAs where there is no concept of an empty selection, this must
set the cursor to be just before the character with offset end. The direction
of the selection must be set to backward if direction is a
case-sensitive match for the string "backward", forward
if direction is a case-sensitive match for the string "forward" or if the platform does not support selections with the direction
none, and none otherwise (including if the argument is omitted). The user agent must
then queue a task to fire a simple event that bubbles named select at the element, using the user interaction task
source as the task source.
The setRangeText(replacement, start, end, selectMode) method must run the following steps:
If the method has only one argument, then let start and end have the values of the selectionStart attribute and the selectionEnd attribute respectively.
Otherwise, let start, end have the values of the second and third arguments respectively.
If start is greater than end, then throw an
IndexSizeError exception and abort these steps.
If start is greater than the length of the value of the text field, then set it to the length of the value of the text field.
If end is greater than the length of the value of the text field, then set it to the length of the value of the text field.
Let selection start be the current value of the selectionStart attribute.
Let selection end be the current value of the selectionEnd attribute.
If start is less than end, delete the sequence of characters starting with the character at the startth position (in logical order) and ending with the character at the (end-1)th position.
Insert the value of the first argument into the text of the value of the text field, immediately before the startth character.
Let new length be the length of the value of the first argument.
Let new end be the sum of start and new length.
Run the appropriate set of substeps from the following list:
select"Let selection start be start.
Let selection end be new end.
start"Let selection start and selection end be start.
end"Let selection start and selection end be new end.
preserve" (the default)Let old length be end minus start.
Let delta be new length minus old length.
If selection start is greater than end, then increment it by delta. (If delta is negative, i.e. the new text is shorter than the old text, then this will decrease the value of selection start.)
Otherwise: if selection start is greater than start, then set it to start. (This snaps the start of the selection to the start of the new text if it was in the middle of the text that it replaced.)
If selection end is greater than end, then increment it by delta in the same way.
Otherwise: if selection end is greater than start, then set it to new end. (This snaps the end of the selection to the end of the new text if it was in the middle of the text that it replaced.)
Set the selection of the text field to the sequence of characters starting with the character at the selection startth position (in logical order) and ending with the character at the (selection end-1)th position. In UAs where there is no concept of an empty selection, this must set the cursor to be just before the character with offset end. The direction of the selection must be set to forward if the platform does not support selections with the direction none, and none otherwise.
Queue a task to fire a simple event that bubbles named select at the element, using the user interaction task
source as the task source.
All elements to which this API applies have either a selection or a text entry cursor position at all times (even for elements that are not being rendered). User agents should follow platform conventions to determine their initial state.
U+200D ZERO WIDTH JOINERã®ãããªãäžå¯èŠã®ã¬ã³ããªã³ã°ããšããªãæåã¯ãäŸç¶ãšããŠæåãšããŠã«ãŠã³ããããããããã£ãŠãããšãã°éžæã¯åã«äžå¯èŠã®æåãå«ããããšãã§ããããã¹ãæ¿å ¥ã«ãŒãœã«ã¯çåŽãŸãã¯ãã®ãããªæåã®å¥ã®ãã®ã«é 眮ã§ããã
çŸåšéžæãããŠããããã¹ããååŸããããã«ã¯ã次ã®JavaScriptã§ååã§ããïŒ
var selectionText = control.value.substring(control.selectionStart, control.selectionEnd);
ããã§ãcontrolã¯inputãŸãã¯textareaèŠçŽ ã§ããã
ããã¹ãã®éžæç¯å²ãç¶æããäžæ¹ã§ãããã¹ãã³ã³ãããŒã«ã®éå§æã«ããã¹ãã远å ããã«ã¯ã3ã€ã®å±æ§ãä¿æãããªããã°ãªããªãïŒ
var oldStart = control.selectionStart; var oldEnd = control.selectionEnd; var oldDirection = control.selectionDirection; var prefix = "http://"; control.value = prefix + control.value; control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldDirection);
ããã§ãcontrolã¯inputãŸãã¯textareaèŠçŽ ã§ããã
A submittable element is a candidate for constraint
validation except when a condition has barred
the element from constraint validation. (For example, an element is barred from
constraint validation if it is an object element.)
An element can have a custom validity error message defined. Initially, an element
must have its custom validity error message set to the empty string. When its value
is not the empty string, the element is suffering from a custom error. It can be set
using the setCustomValidity() method. The user
agent should use the custom validity error message when alerting the user to the
problem with the control.
An element can be constrained in various ways. The following is the list of validity states that a form control can be in, making the control invalid for the purposes of constraint validation. (The definitions below are non-normative; other parts of this specification define more precisely when each state applies or does not.)
When a control has no value but has a required attribute (input required, select required, textarea required), or, in the case of an element in a radio
button group, any of the other elements in the group has a required attribute.
When a control that allows arbitrary user input has a value that is not in the correct syntax (E-mail, URL).
When a control has a value that doesn't satisfy the
pattern attribute.
When a control has a value that is too long for the
form control maxlength attribute
(input maxlength, textarea
maxlength).
When a control has a value that is too short for the
form control minlength attribute
(input minlength, textarea
minlength).
When a control has a value that is too low for the
min attribute.
When a control has a value that is too high for the
max attribute.
When a control has a value that doesn't fit the
rules given by the step attribute.
When a control has incomplete input and the user agent does not think the user ought to be able to submit the form in its current state.
When a control's custom validity error message (as set by the element's
setCustomValidity() method) is not the empty
string.
An element can still suffer from these states even when the element is disabled; thus these states can be represented in the DOM even if validating the form during submission wouldn't indicate a problem to the user.
An element satisfies its constraints if it is not suffering from any of the above validity states.
When the user agent is required to statically validate the constraints of
form element form, it must run the following steps, which return
either a positive result (all the controls in the form are valid) or a negative
result (there are invalid controls) along with a (possibly empty) list of elements that are
invalid and for which no script has claimed responsibility:
Let controls be a list of all the submittable elements whose form owner is form, in tree order.
Let invalid controls be an initially empty list of elements.
For each element field in controls, in tree order, run the following substeps:
If field is not a candidate for constraint validation, then move on to the next element.
Otherwise, if field satisfies its constraints, then move on to the next element.
Otherwise, add field to invalid controls.
If invalid controls is empty, then return a positive result and abort these steps.
Let unhandled invalid controls be an initially empty list of elements.
For each element field in invalid controls, if any, in tree order, run the following substeps:
Fire a simple event named invalid that
is cancelable at field.
If the event was not canceled, then add field to unhandled invalid controls.
Return a negative result with the list of elements in the unhandled invalid controls list.
If a user agent is to interactively validate the constraints of form
element form, then the user agent must run the following steps:
Statically validate the constraints of form, and let unhandled invalid controls be the list of elements returned if the result was negative.
If the result was positive, then return that result and abort these steps.
Report the problems with the constraints of at least one of the elements given in unhandled invalid controls to the user. User agents may focus one of those
elements in the process, by running the focusing steps for that element, and may
change the scrolling position of the document, or perform some other action that brings the
element to the user's attention. User agents may report more than one constraint violation. User
agents may coalesce related constraint violation reports if appropriate (e.g. if multiple radio
buttons in a group are marked as required, only one error
need be reported). If one of the controls is not being rendered (e.g. it has the
hidden attribute set) then user agents may report a script
error.
Return a negative result.
willValidateãã©ãŒã ãéä¿¡ãããéã«èŠçŽ ãèªèšŒãããå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
setCustomValidity(message)èŠçŽ ã®æ€èšŒã«å€±æããããã«ãã«ã¹ã¿ã ãšã©ãŒãèšå®ãããäžããããã¡ãã»ãŒãžã¯ããŠãŒã¶ãŒã«åé¡ãå ±åããéã«ãŠãŒã¶ãŒã«è¡šç€ºãããã¡ãã»ãŒãžã§ããã
åŒæ°ã空æååã§ããå Žåãã«ã¹ã¿ã ãšã©ãŒãã¯ãªã¢ããã
validity . valueMissingèŠçŽ ãå€ãæããªããå¿ é ãã£ãŒã«ãã§ããå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . typeMismatchèŠçŽ ã®å€ãæ£ããæ§æã§ãªãå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . patternMismatchèŠçŽ ã®å€ãæäŸããããã¿ãŒã³ãšãããããªãå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . tooLongèŠçŽ ã®å€ãæäŸãããæå€§é·ãããé·ãå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . tooShortèŠçŽ ã®å€ã空æååã§ã¯ãªããæäŸãããæå°é·ãããçãå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . rangeUnderflowèŠçŽ ã®å€ãæäŸãããæå°å€ããçãå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . rangeOverflowèŠçŽ ã®å€ãæäŸãããæå€§å€ããé·ãå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . stepMismatchèŠçŽ ã®å€ãstep屿§ã«ãã£ãŠäžããããèŠåã«åèŽããªãå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . badInputãŠãŒã¶ãŒãšãŒãžã§ã³ããå€ã«å€æã§ããªããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã§å ¥åããŠãŒã¶ãŒãæäŸãããå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . customErrorèŠçŽ ãã«ã¹ã¿ã ãšã©ãŒãæã€å Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
validity . validèŠçŽ ã®å€ãåŠ¥åœæ§åé¡ãæããªãå Žåtrueãè¿ããããã§ãªããã°falseãè¿ãã
checkValidity()èŠçŽ ã®å€ãåŠ¥åœæ§åé¡ãæããªãå Žåtrueãè¿ããããã§ãªããã°falseãè¿ããåŸè
ã®å ŽåèŠçŽ ã§invalidã€ãã³ããçºç«ããã
validationMessageèŠçŽ ãåŠ¥åœæ§ã«å¯ŸããŠãã§ãã¯ãããå ŽåããŠãŒã¶ãŒã«è¡šç€ºããããšã©ãŒã¡ãã»ãŒãžãè¿ãã
The willValidate attribute must return
true if an element is a candidate for constraint validation, and false otherwise
(i.e. false if any conditions are barring it from
constraint validation).
The setCustomValidity(message), when invoked, must set the custom validity error
message to the value of the given message argument.
次ã®äŸã«ãããŠãã¹ã¯ãªããã¯å€ãç·šéããããã³ã«ãã©ãŒã ã³ã³ãããŒã«ã®å€ããã§ãã¯ãããã€åŠ¥åœãªå€ã§ãªãå Žåã¯ãã€ã§ããé©åãªã¡ãã»ãŒãžãèšå®ããããã«setCustomValidity()ã¡ãœããã䜿çšããã
<label>Feeling: <input name=f type="text" oninput="check(this)"></label>
<script>
function check(input) {
if (input.value == "good" ||
input.value == "fine" ||
input.value == "tired") {
input.setCustomValidity('"' + input.value + '" is not a feeling.');
} else {
// input is fine -- reset the error message
input.setCustomValidity('');
}
}
</script>
The validity attribute must return a
ValidityState object that represents the validity states of the element.
This object is live, and the same object must be returned each time the element's
validity attribute is retrieved.
interface ValidityState {
readonly attribute boolean valueMissing;
readonly attribute boolean typeMismatch;
readonly attribute boolean patternMismatch;
readonly attribute boolean tooLong;
readonly attribute boolean tooShort;
readonly attribute boolean rangeUnderflow;
readonly attribute boolean rangeOverflow;
readonly attribute boolean stepMismatch;
readonly attribute boolean badInput;
readonly attribute boolean customError;
readonly attribute boolean valid;
};
A ValidityState object has the following attributes. On getting, they must return
true if the corresponding condition given in the following list is true, and false otherwise.
valueMissingThe control is suffering from being missing.
typeMismatchThe control is suffering from a type mismatch.
patternMismatchThe control is suffering from a pattern mismatch.
tooLongThe control is suffering from being too long.
tooShortThe control is suffering from being too short.
rangeUnderflowThe control is suffering from an underflow.
rangeOverflowThe control is suffering from an overflow.
stepMismatchThe control is suffering from a step mismatch.
badInputThe control is suffering from bad input.
customErrorThe control is suffering from a custom error.
validNone of the other conditions are true.
When the checkValidity() method is
invoked, if the element is a candidate for constraint validation and does not satisfy its constraints, the user agent must fire a simple
event named invalid that is cancelable (but in this case
has no default action) at the element and return false. Otherwise, it must only return true
without doing anything else.
The validationMessage attribute must
return the empty string if the element is not a candidate for constraint validation
or if it is one but it satisfies its constraints; otherwise,
it must return a suitably localized message that the user agent would show the user if this were
the only form control with a validity constraint problem. If the user agent would not actually
show a textual message in such a situation (e.g. it would show a graphical cue instead), then the
attribute must return a suitably localized message that expresses (one or more of) the validity
constraint(s) that the control does not satisfy. If the element is a candidate for
constraint validation and is suffering from a custom error, then the
custom validity error message should be present in the return value.
ãµãŒãã¯ãã¯ã©ã€ã¢ã³ãåŽã®æ€èšŒã«äŸåãã¹ãã§ã¯ãªããã¯ã©ã€ã¢ã³ãåŽã®æ€èšŒã¯ãæªæãããŠãŒã¶ãŒã«ãã£ãŠæå³çã«ãã€ãã¹ãããå€ããŠãŒã¶ãŒãšãŒãžã§ã³ããŸãã¯ããããã®æ©èœãå®è£ ããªãèªååããŒã«ã®ãŠãŒã¶ãŒã«ãã£ãŠæå³ããã«åé¿ãããããå¶çŽæ€èšŒæ©èœã¯ãããããçš®é¡ã®ã»ãã¥ãªãã£ãŒã¡ã«ããºã ãæäŸããããšã§ãªãããŠãŒã¶ãŒã®å©äŸ¿æ§ãåäžãããããšã®ã¿ãæå³ããã
ãã®ç¯ã¯éèŠç¯çã§ããã
ãã©ãŒã ãéä¿¡ãããéããã©ãŒã å ã®ããŒã¿ã¯enctypeã§æå®ããæ§é äœã«å€æãããæå®ããã¡ãœããã䜿çšããã¢ã¯ã·ã§ã³ã§æå®ããå®å ã«éä¿¡ãããã
ããšãã°ã次ã®ãããªåœ¢åŒããšãïŒ
<form action="/find.cgi" method=get> <input type=text name=t> <input type=search name=q> <input type=submit> </form>
ãŠãŒã¶ãŒãæåã®ãã£ãŒã«ãã§"cat"ããã³2çªç®ã§"ç«"ãšå
¥åããæ¬¡ã«éä¿¡ãã¿ã³ãæŒãå ŽåããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯/find.cgi?t=cats&q=furãèªã¿èŸŒãã
äžæ¹ããã®ãã©ãŒã ãèããŠã¿ãïŒ
<form action="/find.cgi" method=post enctype="multipart/form-data"> <input type=text name=t> <input type=search name=q> <input type=submit> </form>
åããŠãŒã¶ãŒå ¥åãèãããšãæåºäžã®çµæã¯ããªãç°ãªãïŒãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ã次ã®ããã¹ãã®ãããªãšã³ãã£ãã£ããã£ãšããŠã代ããã«æå®ãããURLã«HTTP POSTãè¡ãã
------kYFrd4jNJEgCervE Content-Disposition: form-data; name="t" cats ------kYFrd4jNJEgCervE Content-Disposition: form-data; name="q" fur ------kYFrd4jNJEgCervE--
A form element's default button is the first submit button in tree order whose form
owner is that form element.
If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.
Consequently, if the default button is disabled, the form is not submitted when such an implicit submission mechanism is used. (A button has no activation behavior when disabled.)
There are pages on the Web that are only usable if there is a way to implicitly submit forms, so user agents are strongly encouraged to support this.
If the form has
no submit button, then the implicit submission
mechanism must do nothing if the form has more than one field that blocks implicit
submission, and must submit the form
element from the form element itself otherwise.
For the purpose of the previous paragraph, an element is a field that blocks implicit
submission of a form element if it is an input element whose
form owner is that form element and whose type attribute is in one of the following states:
Text,
Search,
URL,
Telephone,
E-mail,
Password,
Date,
Time,
Number
When a form element form is submitted from an element submitter
(typically a button), optionally with a submitted from submit() method flag set, the user agent must run the
following steps:
Let form document be the form's
Document.
If form document has no associated browsing context or its active sandboxing flag set has its sandboxed forms browsing context flag set, then abort these steps without doing anything.
Let form browsing context be the browsing context of form document.
If the submitted from submit()
method flag is not set, and the submitter element's no-validate state is false, then interactively
validate the constraints of form and examine the result: if the result
is negative (the constraint validation concluded that there were invalid fields and probably
informed the user of this) then fire a simple event named invalid at the form element and then abort these
steps.
If the submitted from submit()
method flag is not set, then fire a simple event that bubbles and is
cancelable named submit, at form. If the
event's default action is prevented (i.e. if the event is canceled) then abort these steps.
Otherwise, continue (effectively the default action is to perform the submission).
Let form data set be the result of constructing the form data set for form in the context of submitter.
Let action be the submitter element's action.
If action is the empty string, let action be the document's address of the form document.
Resolve the URL action, relative to the submitter element. If this fails, abort these steps.
Let action be the resulting absolute URL.
Let action components be the resulting parsed URL.
Let scheme be the scheme of the resulting parsed URL.
Let enctype be the submitter element's enctype.
Let method be the submitter element's method.
Let target be the submitter element's target.
If the user indicated a specific browsing context to use when submitting the form, then let target browsing context be that browsing context. Otherwise, apply the rules for choosing a browsing context given a browsing context name using target as the name and form browsing context as the context in which the algorithm is executed, and let target browsing context be the resulting browsing context.
If target browsing context was created in the previous step, or,
alternatively, if the form document has not yet completely
loaded and the submitted from submit()
method flag is set, then let replace be true. Otherwise, let it be
false.
Otherwise, select the appropriate row in the table below based on the value of scheme as given by the first cell of each row. Then, select the appropriate cell on that row based on the value of method as given in the first cell of each column. Then, jump to the steps named in that cell and defined below the table.
| GET | POST | |
|---|---|---|
http
| Mutate action URL | Submit as entity body |
https
| Mutate action URL | Submit as entity body |
ftp
| Get action URL | Get action URL |
javascript
| Get action URL | Get action URL |
data
| Get action URL | Post to data: |
mailto
| Mail with headers | Mail as body |
If scheme is not one of those listed in this table, then the behavior is not defined by this specification. User agents should, in the absence of another specification defining this, act in a manner analogous to that defined in this specification for similar schemes.
Each form element has a planned navigation, which is either null or a
task; when the form is first created, its
planned navigation must be set to null. In the behaviours described below, when the
user agent is required to plan to navigate to a particular resource destination, it must run the following steps:
If the form has a non-null planned navigation, remove it from
its task queue.
Let the form's planned navigation be a new task that consists of running the following steps:
Let the form's planned navigation be null.
Navigate target browsing context to the particular resource destination. If replace is true, then target browsing context must be navigated with replacement enabled.
For the purposes of this task, target browsing context and replace are the variables that were set up when the overall form submission algorithm was run, with their values as they stood when this planned navigation was queued.
Queue the task that is the form's new
planned navigation.
The task source for this task is the DOM manipulation task source.
The behaviors are as follows:
Let query be the result of encoding the form data
set using the application/x-www-form-urlencoded encoding
algorithm, interpreted as a US-ASCII string.
Set parsed action's query component to query.
Let destination be a new URL formed by applying the URL serializer algorithm to parsed action.
Plan to navigate to destination.
Let entity body be the result of encoding the form data set using the appropriate form encoding algorithm.
Let MIME type be determined as follows:
application/x-www-form-urlencodedapplication/x-www-form-urlencoded".multipart/form-datamultipart/form-data;", a U+0020 SPACE character, the string "boundary=", and the multipart/form-data boundary
string generated by the multipart/form-data encoding
algorithm.text/plaintext/plain".Otherwise, plan to navigate to action using the HTTP method given by method and with entity body as the entity body, of type MIME type.
Plan to navigate to action.
The form data set is discarded.
Let data be the result of encoding the form data set using the appropriate form encoding algorithm.
If action contains the string "%%%%" (four U+0025
PERCENT SIGN characters), then percent encode all bytes in data that, if interpreted as US-ASCII, are not characters in the URL
default encode set, and then, treating the result as a US-ASCII string,
UTF-8 percent encode all the U+0025 PERCENT SIGN characters in the resulting
string and replace the first occurrence of "%%%%" in action with the resulting doubly-escaped string. [URL]
Otherwise, if action contains the string "%%"
(two U+0025 PERCENT SIGN characters in a row, but not four), then UTF-8 percent
encode all characters in data that, if interpreted as US-ASCII, are
not characters in the URL default encode set, and then, treating the result as a
US-ASCII string, replace the first occurrence of "%%" in action with the resulting escaped string. [URL]
Plan to navigate to the potentially modified action (which
will be a data: URL).
Let headers be the resulting encoding the form data
set using the application/x-www-form-urlencoded encoding
algorithm, interpreted as a US-ASCII string.
Replace occurrences of "+" (U+002B) characters in headers with
the string "%20".
Let destination consist of all the characters from the first character in action to the character immediately before the first "?" (U+003F) character, if any, or the end of the string if there are none.
Append a single "?" (U+003F) character to destination.
Append headers to destination.
Plan to navigate to destination.
Let body be the resulting of encoding the form data set using the appropriate form encoding algorithm and then percent encoding all the bytes in the resulting byte string that, when interpreted as US-ASCII, are not characters in the URL default encode set. [URL]
Let destination have the same value as action.
If destination does not contain a "?" (U+003F) character, append a single "?" (U+003F) character to destination. Otherwise, append a single U+0026 AMPERSAND character (&).
Append the string "body=" to destination.
Append body, interpreted as a US-ASCII string, to destination.
Plan to navigate to destination.
The appropriate form encoding algorithm is determined as follows:
application/x-www-form-urlencodedapplication/x-www-form-urlencoded encoding
algorithm.multipart/form-datamultipart/form-data encoding algorithm.text/plaintext/plain encoding algorithm.The algorithm to construct the form data set for a form form optionally in the context of a submitter submitter is as follows. If not specified otherwise, submitter is null.
Let controls be a list of all the submittable elements whose form owner is form, in tree order.
Let the form data set be a list of name-value-type tuples, initially empty.
Loop: For each element field in controls, in tree order, run the following substeps:
If any of the following conditions are met, then skip these substeps for this element:
datalist element ancestor.input element whose type attribute is in the Checkbox state and whose checkedness is false.input element whose type attribute is in the Radio Button state and whose checkedness is false.input element whose type attribute is in the Image Button state, and either the field element does not have a name attribute
specified, or its name attribute's value is the empty
string.object element that is not using
a plugin.Otherwise, process field as follows:
Let type be the value of the type IDL
attribute of field.
If the field element is an input element whose type attribute is in the Image Button state, then run these further nested
substeps:
If the field element has a name
attribute specified and its value is not the empty string, let name be
that value followed by a single "." (U+002E) character. Otherwise, let name be the empty string.
Let namex be the string consisting of the concatenation of name and a single U+0078 LATIN SMALL LETTER X character (x).
Let namey be the string consisting of the concatenation of name and a single U+0079 LATIN SMALL LETTER Y character (y).
The field element is submitter, and before this algorithm was invoked the user indicated a coordinate. Let x be the x-component of the coordinate selected by the user, and let y be the y-component of the coordinate selected by the user.
Append an entry to the form data set with the name namex, the value x, and the type type.
Append an entry to the form data set with the name namey and the value y, and the type type.
Skip the remaining substeps for this element: if there are any more elements in controls, return to the top of the loop step, otherwise, jump to the end step below.
Let name be the value of the field element's
name attribute.
If the field element is a select element, then for each
option element in the select element's list of options whose selectedness is true and that is not disabled, append an entry to the form data
set with the name as the name, the value of the option element as the value, and
type as the type.
Otherwise, if the field element is an input element whose
type attribute is in the Checkbox state or the Radio Button state, then run these further nested
substeps:
If the field element has a value attribute specified, then let value
be the value of that attribute; otherwise, let value be the string "on".
Append an entry to the form data set with name as the name, value as the value, and type as the type.
Otherwise, if the field element is an input element
whose type attribute is in the File Upload state, then for each file selected in the input element,
append an entry to the form data set with the name as
the name, the file (consisting of the name, the type, and the body) as the value, and type as the type. If there are no selected files, then append an entry to the
form data set with the name as the name, the empty
string as the value, and application/octet-stream as the type.
Otherwise, if the field element is an object element:
try to obtain a form submission value from the plugin, and if that is successful,
append an entry to the form data set with name as the
name, the returned form submission value as the value, and the string "object" as the type.
Otherwise, append an entry to the form data set with name as the name, the value of the field element as the value, and type as the type.
If the element has a dirname attribute, and that
attribute's value is not the empty string, then run these substeps:
Let dirname be the value of the element's dirname attribute.
Let dir be the string "ltr" if the
directionality of the element is 'ltr', and "rtl" otherwise (i.e. when the directionality of the element is
'rtl').
Append an entry to the form data set with dirname as the name, dir as the value, and the string
"direction" as the type.
An element can only have a dirname
attribute if it is a textarea element or an input element whose
type attribute is in either the Text state or the Search state.
End: For the name of each entry in the form data set, and for the
value of each entry in the form data set whose type is not "file" or "textarea", replace every occurrence of a "CR" (U+000D) character not followed by a "LF" (U+000A) character, and every
occurrence of a "LF" (U+000A) character not preceded by a "CR" (U+000D)
character, by a two-character string consisting of a U+000D CARRIAGE RETURN "CRLF" (U+000A) character pair.
In the case of the value of
textarea elements, this newline normalization is already performed during the
conversion of the control's raw value into the
control's value (which also performs any necessary line
wrapping). In the case of input elements type
attributes in the File Upload state, the value is not
normalized.
Return the form data set.
If the user agent is to pick an encoding for a form, optionally with an allow non-ASCII-compatible encodings flag set, it must run the following substeps:
Let input be the value of the form element's accept-charset attribute.
Let candidate encoding labels be the result of splitting input on spaces.
Let candidate encodings be an empty list of character encodings.
For each token in candidate encoding labels in turn (in the order in which they were found in input), get an encoding for the token and, if this does not result in failure, append the encoding to candidate encodings.
If the allow non-ASCII-compatible encodings flag is not set, remove any encodings that are not ASCII-compatible character encodings from candidate encodings.
If candidate encodings is empty, return UTF-8 and abort these steps.
Each character encoding in candidate encodings can represent a finite number of characters. (For example, UTF-8 can represent all 1.1 million or so Unicode code points, while Windows-1252 can only represent 256.)
For each encoding in candidate encodings, determine how many of the characters in the names and values of the entries in the form data set the encoding can represent (without ignoring duplicates). Let max be the highest such count. (For UTF-8, max would equal the number of characters in the names and values of the entries in the form data set.)
Return the first encoding in candidate encodings that can encode max characters in the names and values of the entries in the form data set.
ãã®ãã©ãŒã ããŒã¿ã»ããã®ãšã³ã³ãŒãã£ã³ã°ã¯ããããããªæå³ã§åžžè»ãéžãã奿ªãªç©ã§ãããçžäºéçšæ§ã«å¯Ÿããå¿ èŠãªäžé£ã®èŠä»¶ãå°ãå®è£ äºæ ã劥åã®é·å¹Žã®çµæã ããæ±ºããŠè¯ãèšèšææ³ã瀺ããã®ã§ãªããå ·äœçã«ãèªè ã¯ãæåãšã³ã³ãŒãã£ã³ã°ãšãã€ãé åãšã®éã§ç¹°ãè¿ãïŒãããŠå Žåã«ãã£ãŠã¯å ¥ãåã«ãªãïŒå€æã䌎ããããã现éšã«çްå¿ã®æ³šæãæãããã«èŠåãããã
The application/x-www-form-urlencoded encoding algorithm is as
follows:
Let result be the empty string.
If the form element has an accept-charset attribute, let the selected character
encoding be the result of picking an encoding for the form.
Otherwise, if the form element has no accept-charset attribute, but the document's
character encoding is an ASCII-compatible character encoding, then that is
the selected character encoding.
Otherwise, let the selected character encoding be UTF-8.
Let charset be the name of the selected character encoding.
For each entry in the form data set, perform these substeps:
If the entry's name is "_charset_" and its
type is "hidden", replace its value with charset.
If the entry's type is "file", replace its value with the file's
name only.
For each character in the entry's name and value that cannot be expressed using the selected character encoding, replace the character by a string consisting of a U+0026 AMPERSAND character (&), a "#" (U+0023) character, one or more ASCII digits representing the Unicode code point of the character in base ten, and finally a ";" (U+003B) character.
Encode the entry's name and value using the encoder for the selected character encoding. The entry's name and value are now byte strings.
For each byte in the entry's name and value, apply the appropriate subsubsteps from the following list:
Leave the byte as is.
Let s be a string consisting of a U+0025 PERCENT SIGN character (%) followed by uppercase ASCII hex digits representing the hexadecimal value of the byte in question (zero-padded if necessary).
Encode the string s as US-ASCII, so that it is now a byte string.
Replace the byte in question in the name or value being processed by the bytes in s, preserving their relative order.
Interpret the entry's name and value as Unicode strings encoded in US-ASCII. (All of the bytes in the string will be in the range 0x00 to 0x7F; the high bit will be zero throughout.) The entry's name and value are now Unicode strings again.
If the entry's name is "isindex", its type is
"text", and this is the first entry in the form data
set, then append the value to result and skip the rest of the
substeps for this entry, moving on to the next entry, if any, or the next step in the overall
algorithm otherwise.
If this is not the first entry, append a single U+0026 AMPERSAND character (&) to result.
Append the entry's name to result.
Append a single "=" (U+003D) character to result.
Append the entry's value to result.
Encode result as US-ASCII and return the resulting byte stream.
application/x-www-form-urlencodedãã€ããŒãããã³ãŒãããããã«ã次ã®ã¢ã«ãŽãªãºã ã䜿çšãã¹ãã§ããããã®ã¢ã«ãŽãªãºã ã¯ãå
¥åãšããŠU+0000ããU+007FãŸã§ã®ç¯å²å
ã®æåã®ã¿ã䜿çšããUnicodeæååã§æ§æããããã€ããŒãèªèº«ãpayloadãããã©ã«ãã®æåãšã³ã³ãŒãã£ã³ã°encodingãããã³å¿
èŠã«å¿ããŠããããããããisindexã³ã³ãããŒã«ãå«ããã©ãŒã ã®ããã«çæãããŠãããã®ããã«ããã€ããŒããåŠçãããããšã瀺ãisindexãã©ã°ã䜿çšããããã®ã¢ã«ãŽãªãºã ã®åºåã¯ãååãšå€ã®ãã¢ã®ãœãŒãããããªã¹ãã§ãããisindexãã©ã°ãèšå®ãããæåã®ã³ã³ãããŒã«ãæ¬ç©ã®isindexã³ã³ãããŒã«ã ã£ãå Žåãæåã®ååãšå€ã®ãã¢ã¯ããã®åã®éããç©ºã®æååãæã€ã
䜿çšãã¹ãã©ã®ããã©ã«ãã®æåãšã³ã³ãŒãã£ã³ã°ãã±ãŒã¹ãã€ã±ãŒã¹ã§æ±ºå®ãããããäžè¬ã«ããã©ã«ããšããŠäœ¿çšãã¹ãæé©ãªæåãšã³ã³ãŒãã£ã³ã°ã¯ããèªèº«ãèŠã€ãããããã€ããŒããäœæããããã«äœ¿çšããããã©ãŒã ã§ããŒãžããšã³ã³ãŒãããããã«äœ¿çšããããã®ã§ãããããè¯ãããã©ã«ãããªãéããUTF-8ãæšå¥šãããã
isindexãã©ã°ã¯ã¬ã¬ã·ãŒã«ã®ã¿äœ¿çšããããHTMLææžã«é©åãããã©ãŒã ã¯ããã®ãã©ã°ãèšå®ããŠãã³ãŒãããå¿ èŠããããã€ããŒããçæããªãã
stringsãU+0026 AMPERSANDæåïŒ&ïŒã§å³å¯ã«æååãåå²ããpayloadã®çµæãšããã
isindexãã©ã°ãèšå®ãããstringsã§å é æååã"="ïŒU+003DïŒæåãå«ãŸãªãå Žåãstringsã®å é æååã®éå§ã«"="ïŒU+003DïŒæåãæ¿å ¥ããã
pairsãååãšå€ã®ãã¢ã®ç©ºãªã¹ãã«ããã
stringså ã®åæååstringã«å¯ŸããŠã以äžã®ãµãã¹ããããå®è¡ããã
stringã"="ïŒU+003DïŒæåãå«ãå Žåããã®nameãstringã®å é ããstringã®éšåæååã§ãããããã®æåã®"="ïŒU+003DïŒæåãé€ãããšãã§ããããããã°ããã®valueãæåã®æåããéšåæååãšãããã®åŸstringã®æ«å°Ÿã«æåã®"="ïŒU+003DïŒæåãšãããæåã®"=" ïŒU+003DïŒæåãæåã®æåã§ããå Žåãnameã¯ç©ºæååã«ãªãããããæåŸã®æåã§ããå Žåãvalueã¯ç©ºæååã«ãªãã
ããã§ãªããã°ãstringã¯"="ïŒU+003DïŒæåãå«ãŸãªããnameã«stringã®å€ãæãããvalueã空æååã«ããã
nameããã³valueã®ãã¹ãŠã®"+"ïŒU+002BïŒæåãU+0020 SPACEæåã«çœ®æããã
nameããã³valueã§ã®ãã¹ãŠã®ãšã¹ã±ãŒãããšã¹ã±ãŒãã«ãã£ãŠè¡šãããæåã«çœ®æããããã®çœ®æã¯ãã»ãšãã©ã®å Žåååž°çã§ãªãã
ãšã¹ã±ãŒãã¯"%"ïŒU+0025ïŒæåã®åŸã«ç¶ã2ã€ã®ã¢ã¹ããŒ16鲿°ã§ããã
ãšã¹ã±ãŒãã§è¡šçŸãããæåã¯ãã³ãŒããã€ã³ãã16鲿°ïŒ0ãã255ãŸã§ã®ç¯å²å ïŒãšããŠè§£éãããã"%"ïŒU+0025ïŒæåã®åŸã«2æåã®å€ã«çããUnicodeæåã§ããã
ãã£ãŠãããšãã°ãæåå"A%2BC"ã¯"A+C"ã«ãªããåæ§ã«ãæåå"100%25AA%21"ã¯æåå"100%AA!"ã«ãªãã
nameããã³valueæååãISO-8859-1ã«ããããã€ã衚çŸã«å€æããïŒããªãã¡ãçŽæ¥ãã€ãå€ã«ã³ãŒããã€ã³ãããããã³ã°ãããã€ãæååãUnicodeæååã«å€æããïŒã
nameããã³valueãããªããã¢ã«pairsã远å ããã
pairsã®ååãšå€ã®ãã¢ã®ããããããããå Žåã¯ãUS-ASCIIã§ãšã³ã³ãŒããããæåå"_charset_"ããæãååã³ã³ããŒãã³ããããã³US-ASCIIãšããŠãã³ãŒããããéã«æåã®ãã¢ã®å€ã³ã³ããŒãã³ããæã¡ããµããŒããããæåãšã³ã³ãŒãã£ã³ã°ã®ååã§ããå Žåãencodingããã®æåãšã³ã³ãŒãã£ã³ã°ïŒããã©ã«ãã§çœ®æããã¢ã«ãŽãªãºã ã«æž¡ãïŒãšããã
ãšã³ã³ãŒãã£ã³ã°encodingã«åŸã£ãŠãã€ããè§£éããããšã«ãã£ãŠãUnicodeãžpairsã®ããããã®ååãšå€ã®ãååãšå€ã®ã³ã³ããŒãã³ãã倿ããã
pairsãè¿ãã
application/x-www-form-urlencodedMIMEã¿ã€ãäžã®ãã©ã¡ãŒã¿ã¯ç¡èŠããããç¹ã«ããã®MIMEã¿ã€ãã¯charsetãã©ã¡ãŒã¿ããµããŒãããªãã
The multipart/form-data encoding algorithm is as follows:
Let result be the empty string.
If the algorithm was invoked with an explicit character encoding, let the selected character
encoding be that encoding. (This algorithm is used by other specifications, which provide an
explicit character encoding to avoid the dependency on the form element described
in the next paragraph.)
Otherwise, if the form element has an accept-charset attribute, let the selected character
encoding be the result of picking an encoding for the form.
Otherwise, if the form element has no accept-charset attribute, but the document's
character encoding is an ASCII-compatible character encoding, then that is
the selected character encoding.
Otherwise, let the selected character encoding be UTF-8.
Let charset be the name of the selected character encoding.
For each entry in the form data set, perform these substeps:
If the entry's name is "_charset_" and its
type is "hidden", replace its value with charset.
For each character in the entry's name and value that cannot be expressed using the selected character encoding, replace the character by a string consisting of a U+0026 AMPERSAND character (&), a "#" (U+0023) character, one or more ASCII digits representing the Unicode code point of the character in base ten, and finally a ";" (U+003B) character.
Encode the (now mutated) form data set using the rules described by RFC
2388, Returning Values from Forms: multipart/form-data, and
return the resulting byte stream. [RFC2388]
Each entry in the form data set is a field, the name of the entry is the field name and the value of the entry is the field value.
The order of parts must be the same as the order of fields in the form data set. Multiple entries with the same name must be treated as distinct fields.
In particular, this means that multiple files submitted as part of a single
<input type=file multiple> element will result in each file
having its own field; the "sets of files" feature ("multipart/mixed") of
RFC 2388 is not used.
The parts of the generated multipart/form-data resource that correspond
to non-file fields must not have a Content-Type header specified. Their names and
values must be encoded using the character encoding selected above (field names in particular do
not get converted to a 7-bit safe encoding as suggested in RFC 2388).
File names included in the generated multipart/form-data resource (as
part of file fields) must use the character encoding selected above, though the precise name may
be approximated if necessary (e.g. newlines could be removed from file names, quotes could be
changed to "%22", and characters not expressible in the selected character encoding could be
replaced by other characters). User agents must not use the RFC 2231 encoding suggested by RFC
2388.
The boundary used by the user agent in generating the return value of this algorithm is the
multipart/form-data boundary string. (This value is used to
generate the MIME type of the form submission payload generated by this algorithm.)
multipart/form-dataã®ãã€ããŒããè§£éããæ¹æ³ã®è©³çްã«ã€ããŠã¯ãRFC2388ãåç
§ã®ããšã[RFC2388]
The text/plain encoding algorithm is as follows:
Let result be the empty string.
If the form element has an accept-charset attribute, let the selected character
encoding be the result of picking an encoding for the form, with the allow
non-ASCII-compatible encodings flag unset.
Otherwise, if the form element has no accept-charset attribute, then that is the selected
character encoding.
Let charset be the name of the selected character encoding.
If the entry's name is "_charset_" and its type
is "hidden", replace its value with charset.
If the entry's type is "file", replace its value with the file's
name only.
For each entry in the form data set, perform these substeps:
Append the entry's name to result.
Append a single "=" (U+003D) character to result.
Append the entry's value to result.
Append a "CR" (U+000D) "LF" (U+000A) character pair to result.
Encode result using the encoder for the selected character encoding and return the resulting byte stream.
text/plain圢åŒã䜿çšãããã€ããŒãã¯ã人éå¯èªã§ããããšãæå³ãããã圢åŒã¯äžæçã§ããïŒããšãã°ãå€ã®æ«å°Ÿã®æ¹è¡ãšå€ã§ã®ãªãã©ã«ã®æ¹è¡ãåºå¥ããæ¹æ³ã¯ãªãïŒã®ã§ããããã¯ã³ã³ãã¥ãŒã¿ã«ãã£ãŠç¢ºå®ã«è§£éãããªãã
When a form element form is reset, the user agent must fire a simple event named
reset, that bubbles and is cancelable, at form, and then, if that event is not canceled, must invoke the reset algorithm of each resettable element whose form owner is form.
Each resettable element defines its own reset algorithm. Changes made to form controls as part of
these algorithms do not count as changes caused by the user (and thus, e.g., do not cause input events to fire).