表单控件

2019-03-01  本文已影响0人  小小西瓜呀

文本输入框:

<input type="text" /> <!--单标签,必带type属性。可带value属性(默认值,用于提示)-->

示例:

用户名:<input type="text" value="请输入您的用户名"/>


密码输入框:

<input type="password" />

示例:

密&nbsp码:<input type="password" />


单选按钮:

<input type="radio" name="xingbie" />    <!--若存在多个选项,须带name属性,以将所有关联选项绑定在一起,否则会选中多个。-->

示例:

性&nbsp别:<input type="radio" name="xingbie" />男

<input type="radio" name="xingbie" />女

<input type="radio" name="xingbie" />人妖


复选框:

<input type="checkbox" name="gouxuankuang" />     <!--复选框也需要带name属性,以便统一管理-->

示例:

爱&nbsp好:<input type="checkbox" name="aihao" />篮球 <input type="checkbox" name="aihao" />足球 <input type="checkbox" name="aihao" />羽毛球 <input type="checkbox" name="aihao" />乒乓球


checked:默认选中属性

示例:

性&nbsp别:<input type="radio" name="xingbie" checked="checked" />男

<input type="radio" name="xingbie" />女

<input type="radio" name="xingbie" />人妖

复选框同理


提交按钮:<input type="submit" /> <!--提交按钮,默认名为“提交”,可通过value来更改-->

图片按钮:<input type="image" src="image/logoin.png" /> <!--用图片来作为登录按钮-->

重置按钮:<input type="reset" value="重置表单" /> <!--将所有按钮和框恢复到原始状态-->

文件域:<input type="file" /> <上传文件按钮>


效果预览

上一篇 下一篇

猜你喜欢

热点阅读