HTML5 第14章表单2_htm输入替十四-优快云博客

本文链接：https://blog.youkuaiyun.com/dayanjun/article/details/52686696

本文介绍了HTML5中表单的一些新特性与用法，包括新增的输入类型如email、url、date等，以及新的属性如placeholder、autocomplete、autofocus等。还展示了如何使用range类型实现滑块效果，并通过特定属性进行约束。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 第14章表单2

Dome 01 新增属性

<body>
placeholder : 提示信息<br />
<label>text:<input type="text" placeholder="write me" /></label><br />

autocomplete :保存输入值<br />
<input type="text" name="mr" autocomplete="off" /><br />

autofocus: 自动获得光标焦点<br />
<input type="text" autofocus /><br />


list：列表 datalist <br />
text:<input type="text" name="mr" list="mr" />

<datalist id="greetings" style="display:none;">
<option value="明日科技">明日科技</option>
<option value="欢迎你">欢迎你</option>
<option value="你好">你好</option>
</datalist><br />

range:范围0%--100% <br />
<input id="confidence" type="range" name="mr" min="0" max="100" step="5" value="nihao!" required /><br />

</body>
</html>

//min 最小值（默认值为0） max 最大值（默认值为100）
//step 步长
//required 此项必填

Dome 02 input新增与改变

<body>
有效的Email地址：
<input type="email" name="email" value="mingrisoft@yahoo.com.cn" /><br />
无效的Email地址并给出提示：
<input type="email" name="email" /><br />

有效网址：
<input type="url" name="url" value="http://www.mingribook.com" /><br />
无效网址：
<input type="url" name="url" /><br />

出生日期：
<input type="date" name="data1" value="2011-10-14" /><br />

现在时间：
<input type="time" name="time1" value="10:00" /><br />

日期与时间：
<input type="datetime" name="datetime" /><br />

当地日期与时间：
<input type="datetime-local" name="datetime-local" /><br />

月份：
<input type="month" name="month1" value="2011-10" /><br />

周：
<input type="week" name="week1" value="2015-W10" /><br />

数值：
<input type="number" name="number1" value="54" min="10" max="100" step="5" /><br />

范围：
<input stype="range" name="range1" value="25" min="0" max="100" step="5" /><br />

搜素：
input[type="search"]{-webkit-appearance:textfield;}<br />

显示结果：(只有Opera 10支持)
<input type="range" name="range1" min="0" max="100" step="5" />
<output onforminput="value=range1.value">50</output><br />
<input type="submit" value="提交" />