H5中有一些按钮和文本框,它们在注册和登录界面出现次数居多,下面我就给大家介绍一些常见的H5按钮和文本框。
文本框:<input type="text" size="30" maxlength="10"/>
文本框效果图
密码框:<input type="password" size="30" maxlength="10"/>
密码框效果图
单选按钮:<input type="radio" name="sex" value="男" checked/>男<!--name一致则相互排斥 checked为默认-->
<input type="radio" name="sex" value="女"/> 女
单选按钮效果图
复选框:<input type="checkbox"/>运动
<input type="checkbox" checked/>聊天
<input type="checkbox"/>玩游戏
<input type="checkbox"/>唱歌
复选框按钮效果图
下拉例表框:
月份<select>
<option value="一月">一月</option>
<option value="二月">二月</option>
<option value="三月">三月</option>
<option value="四月">四月</option>
<option value="五月">五月</option>
<option value="六月">六月</option>
<option value="七月">七月</option>
<option value="八月">八月</option>
<option value="九月">九月</option>
<option value="十月">十月</option>
<option value="十一月">十一月</option>
<option value="十二月">十二月</option>
</select>
下拉列表框效果图
重置按钮:<input type="reset"/>
重置按钮效果图
图片按钮:<input type="image" src="../images/歌单4.png"/>
图片按钮效果图
普通按钮:<input type="button" value="提交"/>
普通按钮效果图
多行文本域:<textarea cols="65" rows="6">
昨日花开满树红,今朝花落万枝空。滋荣实藉三春秀,变化虚随一夜风。
物外光阴元自得,人间生灭有谁穷?百年大小荣枯事,过眼浑如一梦中。
——(丘处机《落花》>
</textarea><!--cols显示的行数,rows显示的列数-->
多行文本域效果图
文件域:<input type="file"/>
文件域效果图
邮箱:<input type="email"/>
<input type="submit" value="提交"/>
邮箱效果图
网址:<input type="url"/>
<input type="submit" value="提交"/>
网址效果图
数字:<input type="number"/>
<input type="submit" value="提交"/>
数字效果图
滑块:<input type="range" max="15" min="5" step="1"/><!--step步长-->
滑块效果图
搜索框:<input type="search"/>
搜索框效果图
根据上面的基本代码,我们可以制作一个简单地注册或者登录界面,后期我们会讲到页面的美化。这些知识点不知道大家有没有学会?学会了快去制作一个注册界面吧!