HTML标签属性<input>标签

283 阅读2分钟

input标签

<input>用于为基于Web的表单创建交互式控件,以便接受来自用户的数据,让用户输入内容

type类型属性

text:文本
color:颜色
password:不展示具体内容,例如输入密码让字符隐藏起来********

radio:单选框,例如:
<input name ="gender" type = "radio"/>男
<input name ="gender" type = "radio"/>女

checkbox:多选框,用同一个name表示一个组的

file:上传文件
<input type="file" multiple>:可以上传多个文件

submit:提交,按钮,必须有的属性
button:定义一个按钮,里面可以加各种文字,照片,链接
reset:重置按钮
<input type="reset" value="重置">

hidden:上传看不见的内容,给js自动填充一个字符串,id之类的

number:可以在文本框里自己选择填写的数字
search:可以直接在文本框删除内容
tel:电话
email:邮件

其它输入标签

select+option:选择标签
例如:选择是星期几
<select>
<option value ="">--请选择--</option>
<option value ="1">星期一</option>
<option value ="2">星期二</option>
</select>
value是真正的值,星期几是用户看见的值

textarea:输入多行内容,文本框可以拖动

style="resize:nome";固定宽高,不能拖动文本框,改变大小
width =50%;
height =200px;    

事件

onchange:输入改变时触发
onfocus:把鼠标放在上面时触发
onblur:鼠标从里面移出来时触发

代码示例:

<input type="text"/>
<input type="color"/>
<input type="password"/>
<input name="gender"type="radio"/>帅
<input name="gender"type="radio"/>非常帅
<input name="xingge"type="checkbox"/>高
<input name="xingge"type="checkbox"/>富
<input name="xingge"type="checkbox"/>帅
<input type="file"/>
<input type="file" multiple/>
<input type="email">
<textarea style="resize: none; width: 500px; height: 300px;"></textarea>
<select>
    <option value="">--请选择--</option>
    <option value=" 1">星期一</option>
    <option value="2">星期二</option>
</select>
<input type="search">
<input type="number">

详细资料点击:HTML超文本标记语言