是什么
<input>
用于接收用户的输入。没有<input>
用户就没法输入数据,登录注册什么的都不能做,复杂的表单就别想了。
type
属性
<input>
的类型比较多,每一种侧重于不同的数据类型和结构:
<input type="text">
默认值(可以不填type
属性),用于输入文字,如用户名,昵称等等。<input type="password">
密码输入,我们平时输密码时的小黑点就是这么来的。<input type="radio">
单选框,在需要用到单选但选项少的情况下使用。如性别(只有两个选项)。<input type="checkbox">
多选框(复选框),在需要用到多选但选项少时使用,多选,但是选项少的情况下使用。如性取向˙Ꙫ˙ 。<input type="file">
选择文件,上传文件必用。<input type="reset">
重置表单。<input type="hidden" value="秘密">
隐形输入框,一般用于在表单提交时回传重要的令牌(就是一串自产自销的无序字符)来验证用户是真的或状态是对的。<input type="button" value="点我">
按钮,不推荐,正常情况下使用<button>
即可,因为<button>
可以包含子元素,而<input>
不行,灵活度的问题。
举例:
<input type="text">
<input type="text" value="我是text类型">
<input type="password">
<input type="password" placeholder="我是password类型">
<label>
<input type="radio" name="sex" value="male">
男
</label>
<label>
<input type="radio" name="sex" value="female">
女
</label>
<p>请选择你的性别<p>
<label>
<input type="radio" name="sex" value="male">
男
</label>
<label>
<input type="radio" name="sex" value="female">
女
</label>
<p>请选择你的性取向<p>
<label>
<input type="checkbox" name="sex" value="male">
男
</label>
<label>
<input type="checkbox" name="sex" value="female">
女
</label>
<p>请选择你的性取向<p>
<label>
<input type="checkbox" name="sex" value="male">
男
</label>
<label>
<input type="checkbox" name="sex" value="female">
女
</label>
<p>请选择文件<p>
<input type="file" name="avatar">
<p>请选择文件<p>
<input type="file" name="avatar">
<form>
姓名:<input>
<br>
年龄:<input>
<input type="reset" value="点我重置">
</form>
<form>
姓名:<input>
<br>
年龄:<input>
<input type="reset" value="点我重置">
</form>
登录后评论