码迷,mamicode.com
首页 > Web开发 > 详细

HTML各种表单元素模板及写法

时间:2019-12-26 14:44:10      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:ace   checkbox   eset   number   select   单选框   BMI   val   其他   

input中有很多属性type="text"表示文本框;
name是连接前端后端的桥梁
value属性,包含的默认字符串
size宽度
maxlength接受的最多字符数
placeholder占位符
required必填属性
比如写账号和密码框时可以这么写:

 账号: <input type="text" name="username" value="" size="30" maxlength="6" placeholder="手机\邮箱\用户名" required="required" /><br>

password为***一般用于密码

 密码: <input type="password" src="" size="30" maxlength="6" /><br>

提交按钮

        <input type="submit" value="登录" />
        <input type="reset" value="重置" />

单选框
label的两种用法,点击文字可以勾选
checked为默认选择项

  性别:<label><input type="radio" name="gender" checked="checked">男</label>
            <input type="radio" name="gender" id="woman"><label for="woman">女</label>

复选框

  兴趣爱好:
            <label><input type="checkbox" name="interest" id="" value="">读书</label>
            <label><input type="checkbox" name="interest" id="" value="">游泳</label>
            <label><input type="checkbox" name="interest" id="" value="">篮球</label>

列表框
这里用selected为默认
size在这里不是列表宽度
multiple多选

   居住地:<select name="city" size="2" multiple="multiple">
            <option value="NJ">南京</option>
            <option value="SH" selected="selected">上海</option>
            <option value="GZ">广州</option>
            </select>

多行文本域没有value
rows列数cols行数

    简介:<textarea name="showText" rows="3" cols="10" placeholder="请输入您的简介"></textarea>

文件域

  照片:<input type="file" name="" id="" value=""  />

表单邮箱

  邮箱:<input type="email" name="email" id="" value="" />

网址 url

  个人主页:
            <input type="url" name="" id="" value="" />

数字,step代表步长

   请输入数字:
            <input type="number" name="" id="" value="" min="1" max="100" step="3" />

滑块

   <input type="range"/>

搜索

    搜索:<input type="search" name="" id="" value=""/>

普通按钮

             <input type="button" name="" id="" value="按钮" />
            <button type="button">按钮</button>

提交按钮其他表示方式

       <input type="submit" name="" id="" value="提交按钮" />
            <button type="submit">提交按钮</button>
            <input type="image" src=" ../***.png" />

HTML各种表单元素模板及写法

标签:ace   checkbox   eset   number   select   单选框   BMI   val   其他   

原文地址:https://blog.51cto.com/14648170/2461912

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!