HTML各种表单元素模板及写法分享-创新互联

这篇文章主要介绍“HTML各种表单元素模板及写法分享”，在日常操作中，相信很多人在HTML各种表单元素模板及写法分享问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HTML各种表单元素模板及写法分享”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联是一家专业从事成都做网站、成都网站建设、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,创新互联依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务！

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各种表单元素模板及写法分享”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：HTML各种表单元素模板及写法分享-创新互联
链接分享：https://www.cdcxhl.com/article4/ehiie.html

成都网站建设公司_创新互联，为您提供网站维护、网页设计公司、网站内链、动态网站、电子商务、网站营销

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联