小甲鱼web学习第23课

input元素

---

提示说明placeholder属性

<label>邮箱：<input type="email" name="email" pattern="\w[-\w.+]*@(163.com|126.com)" 
placeholder="仅限163和126邮箱"></label>

---

强制填写required属性

<label>邮箱：<input type="email" name="email" pattern="\w[-\w.+]*@(163.com|126.com)" 
placeholder="仅限163和126邮箱" required></label>

---

文本框长度size属性

<label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+" 
placeholder="仅限以http和https开头的网址" required size="30"></label>

---

字符输入数量设置maxlength属性

<label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+" 
placeholder="仅限以http和https开头的网址" required size="30" maxlength="22"></label>

超过22字符时将不再输入

---

实现数据列表list属性和datalist元素
datalist元素和option搭配

<label>网址：<input type="url" name="url" pattern="^((https|http)?:\/\/)[^\s]+" 
placeholder="仅限以http和https开头的网址" size="30" list="url1"></label>
 <datalist id="url1">
        <option value="https://ilovefishc.com">鱼C主页</option>
        <option value="https://fishc.com.cn">鱼C论坛</option>
     <option value="https://fishc.taobao.com">支持小甲鱼</option>
    </datalist>

让input元素与datalist关联在要关联的input内插入list并运用id关联