html5 form的应用

wangzhantao

于 2012-07-27 16:50:28 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： form

本文链接：https://blog.youkuaiyun.com/wangzhantao/article/details/84265407

html5 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了HTML5表单中的关键元素及其输入验证机制，包括姓名输入、标题选择、鞋码输入、电子邮件地址、网址、出生日期、吸引力等级以及提交按钮的应用。介绍了如何使用各种表单元素如文本输入、列表选择、数字输入、电子邮件验证、URL输入、日期选择和滑动条，并通过示例代码展示了实际应用。

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

<form>

<div>
<label for="form-1">Name (required) </label>
<input id="form-1" name= "haha" type="text" autofocus required>
← autofocus here </div>

<div>
<label for="form-2">Title</label>
<input id="form-2" list="mylist" type="text">
<datalist id="mylist">
<option label="Mr" value="Mr">
<option label="Ms" value="Ms">
<option label="Prof" value="Mad Professor">
</datalist>
</div>

<div class="entry">
<label for="form-4">Shoesize</label>
<input id="form-4" name="age" type="number" min="18" max="25">
</div>

<div>
<label for="form-5">Email (required)</label>
<input id="form-5" name="email" type="email" required>
</div>

<div>
<label for="form-6">Webpage</label>
<input id="form-6" name="url" type="url">
</div>

<div >
<label for="form-7">Date of Birth</label>
<input id="form-7" name="dob" type="date">
</div>

<div>
<label for="form-8">Attractiveness </label>
<input id="form-8" name="a" type="range" min="1" max="10" value="0">
<output name="result" onforminput="value=a.value" >0</output>
</div>

<div class="button">
<button type=submit>Submit</button>
</div>
</form>

强大的html5 form表单。