<input>标签--表单标签

1.<input> 标签用于搜集用户信息。自闭合标签。行内块元素。

   根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

2.<input> 类型

单行文本框 <input type="text"/> 【默认】
密码框 <input type="password"/> 
单选按钮

<input type="radio"/> 

name相同，即为一组；

checked="checked"  默认选中；

value的值是提交到服务器时给后台程序看的；
复选框

<input type="checkbox"/> 

name相同，即为一组；

checked="checked"  默认选中；
隐藏域

<input type="hidden"/>

name 规定参数名

value  参数值
文件上传

<input type="file"/>

<form>method="post"  post不限制文件大小

<form>enctype="multipart/form-data"

文件以二进制方式传输，计算机本身底层以二进制来显示传输
用户提交

提交按钮<input type="submit"/> 

普通按钮<input type="button"/>无提交功能

重置按钮<input type="reset"/>

图片按钮<input type="image"> 有时候提交2次，需要src
email

在提交表单的时候，会自动验证email域的值。

HTML5新增的Input类型

例：<input type="email" name="user_email">
url

在提交表单的时候，会自动验证url域的值。

HTML5新增的Input类型

例：<input type="url" name="user_url">
 number  只能输入数字。

属性 min 最小值 max 最大值 可设置一个范围

HTML5新增的Input类型

例：<input type="number" name="points" min="1" max="10">
range 显示滑动条。

属性 min 最小值 max 最大值 可设置一个范围

      value是当前值

HTML5新增的Input类型

例：<input type="range" value="5" min="1" max="10">

Date

 输入或选取日期和时间。

HTML5新增的Input类型

例：<input type="date" name="user_date">
search

搜索框，显示为正常文本域，但是输入完内容有清除按钮。

HTML5新增的Input类型

例：<input type="search" name="search" placeholder="请输入搜索内容">
 color  提供选择颜色的面板。

HTML5新增的Input类型

例：<input type="color" name="color">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

使用html5 input新增类型提升移动端输入体验，但是有些手机的浏览器未能支持所有的类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input--表单</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <!-- 单行文本框-->
        用户名：<input type="text" name="username"/>
        <!-- 密码框-->
        密码：<input type="password" name="password"/>
        <hr />
        <!-- 单选按钮-->
        已完成作业：<input type="radio" name="work" checked="checked"/>
        未完成：<input type="radio" name="work"/>
        <hr/>
        <!-- 复选框-->
        英语书：<input type="checkbox" name="book" checked="checked"/>
        数学书：<input type="checkbox" name="book" checked="checked"/>
        物理书：<input type="checkbox" name="book" />
        语文书：<input type="checkbox" name="book" />
        <hr/>
        <!-- 文件上传-->
        <input type="file" name="file">
        <hr/>
        <!-- 用户提交-->
        <input type="button" value="提交"/>
        <input type="image" src="test.jpg"  width="50px">
        <input type="reset" value="重置"/>
        <input type="submit" value="提交">
    </form>
</body>
</html>
input
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table--表单</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td>用户：</td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="text" name="password"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交"/>
                    <input type="reset" value="重置"/>
                </td>
            </tr>
        </table>

    </form>
</body>
</html>
table--表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input新增类型</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data" >
        <table>
            <tr>
                <td>电子邮件：</td>
                <td><input type="email" name="user_name"/></td>
            </tr>
            <tr>
                <td>网络地址：</td>
                <td><input type="url" name="user_url"/></td>
            </tr>
            <tr>
                <td>数字：</td>
                <td><input type="number" name="points" min="1" max="10"/></td>
            </tr>
            <tr>
                <td>范围：</td>
                <td><input type="range" name="range" min="1" max="150" value="100"/></td>
            </tr>
            <tr>
                <td>日期：</td>
                <td><input type="date" name="date"/></td>
            </tr>

            <tr>
                <td>搜索：</td>
                <td><input type="search" name="search" placeholder="请输入搜索内容"/></td>
            </tr>
            <tr>
                <td>颜色：</td>
                <td><input type="color" name="color" /></td>
            </tr>
            <tr>
                <td><input type="submit" value="提交"/></td>
            </tr>
        </table>
    </form>
</body>
</html>
Input新增类型

 

posted @ 2019-07-07 11:08  C_XingM  阅读(298)  评论(0)    收藏  举报