关于H5的一些按钮

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"/>

搜索框效果图

根据上面的基本代码，我们可以制作一个简单地注册或者登录界面，后期我们会讲到页面的美化。这些知识点不知道大家有没有学会？学会了快去制作一个注册界面吧！