HTML 5深入浅出教学篇之六-深入浅出html5编程

介绍

HTML 5: 表单元素之input 元素

表单元素之 input 元素 - text, password, url, telephone, email, search, file, radio, checkbox, button, submit, reset, number, range, image, hidden, color, datetime, datetime-local, date, time, month, week

input 元素的通用属性 - autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step

示例

1、text - 文本框element/form/input/text.html

<!doctype html> 
<html> 
<head> 
    <title>text</title> 
</head> 
<body> 
    <!--  
        text - 文本框  
          autocomplete - 是否启用自动完成功能，“on”或“off”  
          placeholder - 提示文本（Opera 支持此标准）  
    --> 
    <input type="text" autocomplete="on" placeholder="请输入。。。" /> 
</body> 
</html>

2、password - 密码框element/form/input/password.html

<!doctype html> 
<html> 
<head> 
    <title>password</title> 
</head> 
<body> 
    <!--  
        password - 密码框  
    --> 
    <input type="password" value="111111" /> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);     
    </script> 
</body> 
</html>

3、url - url 框element/form/input/url.html

<!doctype html> 
<html> 
<head> 
    <title>url</title> 
</head> 
<body> 
    <!--  
        url - url 框，文本框形式  
    --> 
    <input type="url" value="http://www.cnblogs.com/" /> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);      
    </script> 
</body> 
</html>

4、telephone - 电话框element/form/input/telephone.html

<!doctype html> 
<html> 
<head> 
    <title>telephone</title> 
</head> 
<body> 
    <!--  
        telephone - 电话框，文本框形式  
    --> 
    <input type="telephone" value="110" /> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);      
    </script> 
</body> 
</html>

5、email - 电子邮件框element/form/input/email.html

<!doctype html> 
<html> 
<head> 
    <title>email</title> 
</head> 
<body> 
    <!--  
        email - 电子邮件框，文本框形式  
    --> 
    <input type="email" value="www@abc.com" /> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);      
    </script> 
</body> 
</html>

#p#

6、search - 搜索框element/form/input/search.html

<!doctype html> 
<html> 
<head> 
    <title>search</title> 
</head> 
<body> 
    <!--  
        search - 搜索框，文本框形式  
    --> 
    <input type="search" value="我是 search，是一个有特殊语义的 text" /> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);      
    </script> 
</body> 
</html>

7、file - 用于上传文件element/form/input/file.html

<!doctype html> 
<html> 
<head> 
    <title>file</title> 
</head> 
<body> 
    <!--  
        file - 用于上传文件  
    --> 
    <input type="file" /> 
</body> 
</html>

8、radio - 单选框element/form/input/radio.html

<!doctype html> 
<html> 
<head> 
    <title>radio</title> 
</head> 
<body> 
    <!--  
        radio - 单选框  
          checked - 是否是选中状态  
          name - 相同的是同一组  
    --> 
    <input id="rad" type="radio" checked name="rad" /> 
    <label for="rad">radio button title</label> 
    <input id="rad2" type="radio" name="rad" /> 
    <label for="rad2">radio button title</label> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);      
    </script> 
</body> 
</html>

9、checkbox - 复选框element/form/input/checkbox.html

<!doctype html> 
<html> 
<head> 
    <title>checkbox</title> 
</head> 
<body> 
    <!--  
        checkbox - 复选框  
          checked - 是否是选中状态  
    --> 
    <input id="chk" type="checkbox" checked /> 
    <label for="chk">checkbox title</label> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].checked);  
    </script> 
</body> 
</html>

10、button - 一般按钮element/form/input/button.html

<!doctype html> 
<html> 
<head> 
    <title>button</title> 
</head> 
<body> 
    <!--  
        button - 一般按钮  
    -->      
    <input type="button" value="button" /> 
</body> 
</html>

#p#

11、submit - 提交按钮element/form/input/submit.html

<!doctype html> 
<html> 
<head> 
    <title>submit</title> 
</head> 
<body> 
    <!--  
        submit - 提交按钮，用于提交 form 内元素  
    --> 
    <form action="#"> 
        <input type="text" /> 
        <input type="submit" value="submit button" /> 
    </form> 
</body> 
</html>

12、reset - 复位按钮element/form/input/reset.html

<!doctype html> 
<html> 
<head> 
    <title>reset</title> 
</head> 
<body> 
    <!--  
        reset - 复位按钮，用于复位 form 内元素  
    --> 
    <form action="#"> 
        <input type="text" /> 
        <input type="reset" value="reset" /> 
    </form> 
</body> 
</html>

13、number - 数字输入框element/form/input/number.html

<!doctype html> 
<html> 
<head> 
    <title>number</title> 
</head> 
<body> 
    <!--  
        number - 数字输入框（Opera 支持此标准）  
          value - 数字的值  
          min - 数字的最小值  
          max - 数字的最大值  
          step - 上下箭头增减数字的时候，指定其步长  
    --> 
    <input type="number" value="10" min="10" max="100" step="10" /> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);     
    </script> 
</body> 
</html>

14、range - 滑动条element/form/input/range.html

<!doctype html> 
<html> 
<head> 
    <title>range</title> 
</head> 
<body> 
    <!--  
        range - 滑动条（Opera 支持此标准）  
          value - 数字值  
          min - 数字的最小值  
          max - 数字的最大值  
          step - 步长  
    --> 
    <input type="range" value="50" min="0" max="100" step="10" /> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);      
    </script> 
</body> 
</html>

15、image - 显示图片element/form/input/image.html

<!doctype html> 
<html> 
<head> 
    <title>image</title> 
</head> 
<body>      
    <!--  
        image - 显示图片  
          src - 图片地址  
    --> 
    <input type="image" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" /> 
</body> 
</html>

#p#

16、hidden - 隐藏元素，不会显示element/form/input/hidden.html

<!doctype html> 
<html> 
<head> 
    <title>hidden</title> 
</head> 
<body> 
    <!--  
        hidden - 隐藏元素，不会显示  
    --> 
    <input type="hidden" value="我是 hidden" /> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);      
    </script> 
</body> 
</html>

17、color - 颜色选择器element/form/input/color.html

<!doctype html> 
<html> 
<head> 
    <title>color</title> 
</head> 
<body> 
    <!--  
        color - 颜色选择器（目前仅 Opera 支持此标准）  
          value - 选中的颜色值  
    --> 
    <input type="color" value="#FF0000" /> 
    <script type="text/javascript"> 
        alert(document.getElementsByTagName("input")[0].value);      
    </script> 
</body> 
</html>

18、datetime - 日期时间输入/选择框（UTC）, datetime-loca - 日期时间输入/选择框（本地时区）, date - 日期输入/选择框, time - 时间输入/选择, month - 月份输入/选择框, week - 星期输入/选择框element/form/input/datetime_datetime-local_date_time_month_week.html.html

<!doctype html> 
<html> 
<head> 
    <title>datetime datetime-local date time month week</title> 
</head> 
<body> 
    <!--  
        目前仅 Opera 支持此标准  
        datetime - 日期时间输入/选择框（UTC）  
        datetime-loca - 日期时间输入/选择框（本地时区）  
        date - 日期输入/选择框  
        time - 时间输入/选择框  
        month - 月份输入/选择框  
        week - 星期输入/选择框  
    --> 
    <input type="datetime" /> 
    <br /> 
    <input type="datetime-local" /> 
    <br /> 
    <input type="date" /> 
    <br /> 
    <input type="time"" /> 
    <br /> 
    <input type="month" /> 
    <br /> 
    <input type="week" /> 
</body> 
</html>

19、input 元素的通用属性element/form/input/_attributes.html

<!doctype html> 
<html> 
<head> 
    <title>input 元素的通用属性: autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step</title> 
</head> 
<body> 
    <!--请用 opera 测试--> 
    <form action="#"> 
        <!--  
            autocomplete - 是否启用自动完成功能（on 或 off）  
        --> 
        <input type="text" autocomplete="on" /> 
        <br /> 
        <!--  
            placeholder - 用于定义提示文本  
        --> 
        <input type="text" autocomplete="on" placeholder="请输入。。。" /> 
        <br /> 
        <!--  
            pattern - 用指定的正则表达式对 input 的值做验证  
        --> 
        <input pattern="[0-9]" value="6" /> 
        <br /> 
        <!--  
            dirname - 用于将文本排列方向以参数的形式发给服务端  
              示例：下面的 input 在 submit 后，会自动增加参数 &textdir=ltr 
        --> 
        <input type="text" name="textName" dirname="textdir" /> 
        <br /> 
        <!--  
            size - 指定 input 的显示宽度（单位：字符数）  
        --> 
        <input type="text" value="webabcd" size="10" /> 
        <br /> 
        <!--  
            maxlength - 指定可输入的最大字符长度  
        --> 
        <input type="text" maxlength="10" /> 
        <br /> 
        <!--  
            readonly - 指定 input 是否是只读模式  
        --> 
        <input type="text" value="webabcd" readonly /> 
        <br /> 
        <!--  
            required - 指定是否为必填元素  
        --> 
        <input type="text" required /> 
        <br /> 
        <!--  
            list - 指定建议数据源，建议数据源为一个 datalist 元素。所谓建议数据源可以理解为：系统推测的用户可能输入的内容列表，以方便用户输入，但并不会限制用户的输入  
        --> 
        <input type="email" list="contacts" /> 
        <datalist id="contacts"> 
            <option value="aabb@aa.com" /> 
            <option value="ccdd@cc.com" /> 
            <option value="eeff@ee.com" /> 
        </datalist> 
        <br /> 
        <!--  
            multiple - 是否可多选  
              如下例：可以在一个 input 中选择多个 email  
        --> 
        <input type="email" list="contacts2" multiple /> 
        <datalist id="contacts2"> 
            <option value="aabb@aa.com" /> 
            <option value="ccdd@cc.com" /> 
            <option value="eeff@ee.com" /> 
        </datalist> 
        <br /> 
        <!--  
            以下属性适用于 type="range", type="number" 等  
            min - 数字的最小值  
            max - 数字的最大值  
            step - 步长  
        --> 
        <input type="range" value="50" min="0" max="100" step="10" /> 
        <br /> 
        <input type="submit" value="submit" /> 
    </form> 
</body> 
</html>

[源码下载]

原文链接：http://www.cnblogs.com/webabcd/archive/2012/02/06/2339534.html