最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

H5学习之旅-H5的表单(11)-H5教程

来源:http://erdangjiade.com/topic/132926.html H5程序员 2017-10-29 20:28浏览(52)


H5的表单元素

form:表单

input:输入域,type属性可以设置text,password,button等不同的属性

textarea:文本域

lable:控制标签

fieldset:定义域

legend:域的标题

select:选择列表

optgroup:选项组

option:下拉列表中的选项

button:按钮

!!!!!!!!!!代码实例

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body><form>
    用户名:    <br/>
    <input type="text">
    密码:    <input type="password">
    你有喜欢的水果没?    <br/>
    苹果<input type="checkbox">
    西红柿<input type="checkbox">
    香蕉<input type="checkbox">
    <br/>
    请选择您的性别?    <br/>
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">
    <br/>
    请选择您经常去的网站?    <br/>
    <select>
        <option>www.baidu.com</option>
        <option>www.google.com</option>
        <option>www.youku.com</option>
    </select>
    <br/>
    <input type="button" value="按钮">
    <input type="submit"></form>
    <textarea cols="30" rows="30">请在此填写个人信息</textarea></body></html>

!!!!!效果图


这里写图片描述

H5的表单元素

form:表单

input:输入域,type属性可以设置text,password,button等不同的属性

textarea:文本域

lable:控制标签

fieldset:定义域

legend:域的标题

select:选择列表

optgroup:选项组

option:下拉列表中的选项

button:按钮

!!!!!!!!!!代码实例

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格</title></head><body><form>
    用户名:    <br/>
    <input type="text">
    密码:    <input type="password">
    你有喜欢的水果没?    <br/>
    苹果<input type="checkbox">
    西红柿<input type="checkbox">
    香蕉<input type="checkbox">
    <br/>
    请选择您的性别?    <br/>
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">
    <br/>
    请选择您经常去的网站?    <br/>
    <select>
        <option>www.baidu.com</option>
        <option>www.google.com</option>
        <option>www.youku.com</option>
    </select>
    <br/>
    <input type="button" value="按钮">
    <input type="submit"></form>
    <textarea cols="30" rows="30">请在此填写个人信息</textarea></body></html>

!!!!!效果图

这里写图片描述

以上就是H5学习之旅-H5的表单(11)的内容,更多相关内容请关注PHP中文网(www.erdangjiade.com)!

评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2