欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML表单输入类型

程序员文章站 2022-06-10 14:17:49
...

<fieldset>组合成表单,<legend>来定义表单标题

<form>
<fieldset>
<legend>:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

<botton>元素

onclick属性可以设置提醒窗口等动作

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<datalist>元素

有预定值选项的<input>text元素
input list=’‘id’’

<form>
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

<radio>属性和<checkbox>属性的区别:

<radio>元素有预选值且只可以选择一个

<checkbox>元素可以选择零或者多个选项

<number>属性演示

<form>
  数量(1 to 5):
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

HTML表单输入类型

HTML表单输入类型

<data>属性演示

同样可以添加上述限制

<form>
  Birthday:
  <input type="date" name="bday">
  <input type="submit">
</form>

HTML表单输入类型

输入类型:<color >

选择颜色

输入类型:<range>

<form>
  <input type="range" name="points" min="0" max="10">
</form>

HTML表单输入类型

输入类型:<month>

输入类型:<week>

输入类型:<time>

还有一些主流浏览器不支持的类型

相关标签: HTML学习笔记