input在前端中使我们需要熟悉使用的一个标签,input中type属性值不止text一个。

1.首先是最常用的 text

<input type="text" placeholder="type是text的样子"/>

可定义单行输入字段,用户可以自定义输入文字,默认最多输入20个。placeholder为文本框初始默认的文字

效果图:

2.button 用法类似按钮Button

 <input type="button" value='type是button的样子'/>

value是按钮中的文字。

效果图:

3.submit提交按钮,与上一个button类似

submit和button的区别是可以点击回车就可以触发按钮,提交表单 

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

效果图:

 4.radio单选框

定义一个单选的按钮,可以定义checked=“checked”强制勾选,同时也可以使用disabled使按钮不可选

效果图:

    <input type="radio" value="one" checked='checked' disabled="disabled" name='type'/>按钮是type的样子1
    <input type="radio" value="two" checked='checked' disabled="disabled" name='type'/>按钮是tyepe的样子2

 5.checked复选框

定义一个可以勾选的按钮,与上一个radio按钮类似,也可以使用checked和disabled属性改变它的是否勾选和可不可选

<input type="checkbox" value="one" checked='checked' disabled="disabled" name='type'/>按钮是type的样子1
<input type="checkbox" value="two" checked='checked' disabled="disabled" name='type'/>按钮是tyepe的样子2

效果图:

6.定义时间勾选

定义一个事件,根据Type不同有不同样式

    <input type="time" value="提交">
    <br>
    <br>
    <input type="month" value="提交">
    <br>
    <br>
    <input type="date" value="提交">

 效果图:

 其他type属性的Input大家可以自行尝试或者去官方文档查阅。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐