input标签

时间 2019-11-17

标签 input 标签繁體版

原文原文链接

1、input标签　

<body>
    <input type="text" name="user"/>
    <br />
    <input type="password" name="password"/>
    <br />
    <br />
    <input type="button" value="登入1" />
    <input type="submit" value="登入2" />
</body>

'''
 type:   
        text  文本输入框
        
        password 密码输入框

        button   按钮（须要配合js使用）
 
        subbmit   提交按钮
'''

　　显示以下：html

2、form表单提交

　　上面的内容是没法提交的，虽然有提交按钮，可是没有提交到后台的地址，这里就须要使用form表单来提交了。　python

<body>
    <form action="http://localhost:8000" method="get">
        <input type="text" name="user"/>
        <br />
        <input type="password" name="password"/>
        <br />
        <br />
        <input type="button" value="登入1" />
        <input type="submit" value="登入2" />
    </form>
</body>

'''
  1. action: 指定要发送数据的后台url地址

  2.  method: 提交表单使用的方法，有POST和GET, 默认为GET方法
'''

　　注：web

　　input标签中的内容要提交到后台，必需要有一个name属性，当点击submit按钮提交时，数据会被打包成一个字典的形式，{'user':'bigberg','password':'111111'},而后将这个数据提交到后台浏览器

　　form标签提交的内容只能是 input 和 select 标签的内容缓存

　　POST和GET方法的区　　安全

	GET	POST
后退按钮/刷新	无害	数据会被从新提交（浏览器应该告知用户数据会被从新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只容许 ASCII 字符。	没有限制。也容许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，由于所发送的数据是 URL 的一部分。服务器在发送密码或其余敏感信息时毫不要使用 GET ！app	POST 比 GET 更安全，由于参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对全部人都是可见的。	数据不会显示在 URL 中。

3、input表单类型和属性

　　3.1 文本框的默认值post

<input type="text" name="user" value="哈士奇"/>
<br />
<input type="password" name="password" value="hashiqi"/>

　　3.2 单选框radio　编码

<body>
    <div>
        <p>性别</p>
        <span>男:</span><input type="radio"/>
        <span>女:</span><input type="radio"/>
    </div>
    <br />
    <input type="submit" value="提交" />
</body>

显示以下：　　　　

　　咱们能够添加name属性，并将name属性设置为同样，那么单选框就能保证只能选择一个了，以下：　

<body>
    <div>
        <p>性别</p>
        <span>男:</span><input type="radio" name="gender"/>
        <span>女:</span><input type="radio" name="gender"/>
    </div>
    <br />
    <input type="submit" value="提交" />
</body>

'''
 name属性设置同样，就能实现单选的功能
'''

显示以下：

　　上面的内容若是提交到后台，仍是不能区分gender指的是男仍是女，因此仍是须要设置一个value值：

<body>
    <form>
        <div>
            <p>性别</p>
            <span>男:</span><input type="radio" name="gender" value="1"/>
            <span>女:</span><input type="radio" name="gender" value="2"/>
        </div>
        <br />
        <input type="submit" value="提交" />
    </form>
</body>


'''
 用value值来区分单选框选择的具体值
'''

　　设置默认值checked="checked"：

<span>男:</span><input type="radio" name="gender" value="1" checked="checked"/>
 <span>女:</span><input type="radio" name="gender" value="2"/>

'''
    checked="checked" 设置默认
'''

　　3.3 多选框checkbox　　

<body>
    <form>
        <div>
            <p>爱好</p>
            <span>足球</span> <input type="checkbox" name="favor" value="1">
            <span>蓝球</span> <input type="checkbox" name="favor" value="2">
            <span>棒球</span> <input type="checkbox" name="favor" value="3">
            <span>网球</span> <input type="checkbox" name="favor" value="4">
        </div>
        <input type="submit" value="提交">
    </form>
</body>

'''
  一样以value的值来肯定不一样的选项
  一样可使用 checked="checked" 来设置默认值 
'''

　　3.4 文件上传file

<body>
    <form enctype="multipart/form-data">
        <div>
            <p>上传文件</p>
            <input type="file" />
        </div>
        <input type="submit" value="提交">
    </form>
</body>

'''
 file 提交文件：form表单须要加上属性enctype="multipart/form-data" 
            
 上传文件注意两点：

    1 请求方式必须是post
    2 enctype="multipart/form-data"
  
'''

　　3.5 重置reset　

<body>
    <form>
        <div>
            <input type="text" name="user"/>
            <br />
            <input type="password" name="password"/>
        </div>
        <input type="submit" value="提交">
        <input type="reset" value="重置"/>
    </form>
</body>

'''
 重置按钮能够将输入的信息清空
'''