HTML表单输入类型

<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>

演示

输入限制

<data>属性演示

同样可以添加上述限制

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

在这里插入图片描述

输入类型:<color >

选择颜色

输入类型:<range>

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

在这里插入图片描述

输入类型:<month>

输入类型:<week>

输入类型:<time>

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

发布了5 篇原创文章 · 获赞 8 · 访问量 147

猜你喜欢

转载自blog.csdn.net/qq_41027897/article/details/104975711