2021-10-20

input——type

type属性是input标签的属性之一，非常重要。这篇是对type属性的小结。

type=“text”：创建单行文本输入框

 <input type="text" value="">

type=“password”：密码输入框

  <input type="password" value="">

type=“radio”：单选按钮

象棋<input type="radio" value="" >
围棋<input type="radio" value=""  checked>
All<input type="radio" value="all">

注意：checked属性表示的是初始选项，初始默认选项，初始值会选择"围棋"

type=“checkbox”：复选框

  北京<input type="checkbox" value="beijing" name="city">
  广州<input type="checkbox" value="guangzhou" name="city">
  深圳<input type="checkbox" value="shenzhen" name="city">
  上海<input type="checkbox" value="shanghai" name="city">
 成都<input type="checkbox" value="chengdu" name="city">

type=“button”：普通按钮

<input type="button" value="确认" name="" onClick="">

type=“submit”：提交按钮

<input type="submit" value="提交" name="">

type=“reset”：重置按钮

 <input type="reset" value="重置" name="reset">

type=“image”：图像按钮

  <input type="image" src="图片URL" name="">

type=“file”：文件域

 <input type="file" name="file" value="选择文件">

HTML5新增input type属性

type=“url”：输入URL字段

 <input type="url">

type=“tel”：输入电话号码

 <input type="tel" name="" value="">

type=“search”：搜索

 <input type="search" name="" value="">

type=“email”：该控件用来输入"email"地址

 <input type="email" name="" value="">

type=“color”：颜色选择

  <input type="color" name="" value="">

type=“number”：数字

  <input type="number" name="number">

type=“date”：日期控件

 <input type="date">

type=“week” 周控件

  <input type="week" value="">

type=“month” 年月控件

  <input type="month" value="">

type=“datetime”：日期加时间控件

  <input type="datetime" id="datetime" value="">  

以上是前端学习，html阶段和css阶段常见的属性，当然后面还会学到更多，但是学习新知识时别把基础知识忘了哟