:required
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
:required CSS 伪类表示任ä½è®¾ç½®äº required 屿§ç <input>ã<select> æ <textarea> å
ç´ ã
å°è¯ä¸ä¸
label {
display: block;
margin-top: 1em;
}
.req {
color: red;
}
*:required {
background-color: gold;
}
<form>
<label for="name">Name: <span class="req">*</span></label>
<input id="name" name="name" type="text" required />
<label for="birth">Date of Birth:</label>
<input id="birth" name="birth" type="date" />
<label for="origin"
>How did you find out about us? <span class="req">*</span></label
>
<select id="origin" name="origin" required>
<option>Google</option>
<option>Facebook</option>
<option>Advertisement</option>
</select>
<p><span class="req">*</span> - Required field</p>
</form>
è¿ä¸ªä¼ªç±»å¾æç¨ï¼å¯ä»¥çªåºæ¾ç¤ºå¨æäº¤è¡¨åä¹åå¿ é¡»å ·ææææ°æ®çåæ®µã
夿³¨ï¼:optional ä¼ªç±»éæ©å¯é表ååæ®µã
è¯æ³
css
:required {
/* ... */
}
示ä¾
>å¿ å¡«åæ®µå ·æçº¢è²è¾¹æ¡
HTML
html
<form>
<div class="field">
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
</div>
<div class="field">
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required />
</div>
</form>
CSS
css
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
ç»æ
æ éç¢èè
å¿
å¡«ç <input> åºè¯¥åºç¨ required 屿§ãè¿å°ç¡®ä¿ä½¿ç¨è¾
婿æ¯ï¼ä¾å¦å±å¹é
读å¨ï¼å¯¼èªç人è½å¤äºè§£åªäºè¾å
¥éè¦ææå
å®¹ä»¥ç¡®ä¿æåæäº¤ã
å¦æè¡¨åè¿å å«å¯éè¾å ¥ï¼åä¸åºä» ä» ä¾èµäºé¢è²è¿ä¸ç§ä¼ è¾¾æä¹çæ¹å¼å¨è§è§ä¸æç¤ºå¿ å¡«è¾å ¥ãé常è¿åºä½¿ç¨æè¿°æ§ææ¬å/æå¾æ ã
è§è
| è§è |
|---|
| HTML> # selector-required> |
| Selectors Level 4> # required-pseudo> |
æµè§å¨å ¼å®¹æ§
åè§
- å
¶ä»ä¸éªè¯ç¸å
³ç伪类ï¼
:optionalã:invalidå:valid - è¡¨åæ°æ®æ ¡éª