input标签

最新推荐文章于 2023-04-11 19:37:20 发布

qq_29069777

最新推荐文章于 2023-04-11 19:37:20 发布

阅读量231

点赞数

分类专栏：前端文章标签： web开发基础

原文链接：https://www.mk2048.com/blog/blog.php?id=h0j2hj1bh1ab&title=input%E6%A0%87%E7%AD%BE

版权

前端专栏收录该内容

1175 篇文章 2 订阅

订阅专栏

一、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   提交按钮
'''

　　显示如下：

二、form表单提交

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

<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方法
'''

　　注：

　　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 ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

三、input表单类型和属性

　　3.1 文本框的默认值

<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>

'''
 重置按钮可以将输入的信息清空
'''