input标签

在学习python时，想要开发一个自动化运维系统，学习Html，Css和JavaScript是不可避免的，但是学习前端知识的过程中发现，前端知识点错综复杂，内容繁多，上百个标签，难免会陷入一个坑，固执地去深入挖掘web知识。

但是我们的初心是想要开发个页面，为自动化运维提供服务。

所以在学习前端知识时，针对性地学习比较重要的。所以，我先整理出常用的一些标签，完成现有的需求。等后面时间充足写，继续深入了解.

input标签

• input 标签用于搜集用户信息。
• 根据不同的 type 属性值，输入字段拥有很多种形式。
• 输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

学习目的

编写一个用户登陆，注册的页面;

input标签范例

文本表单

<--注释:
    # 一个文本表单，type表示输入框的类型；
<input type='text' name='user' />



<-- 注释:
    # value属性代表默认用户名为user;-->   
<input type='text' name='user' value='user' />

密码表单

<--注释:
    # 其中的name内容时为了给提交的内容一个key值；-->
<input type='password' name='pwd' />

按钮

<--注释:
     # 单纯的按钮需要结合javascript，此处了解即可;-->

<input type='button' value='按钮里显示的内容' />

提交按钮

<--注释:
    一般在用户注册，填写信息完毕，一定有个提交按钮；-->

<input type='submit' value='提交按钮显示的内容' />

form表单

• input的提交按钮:单纯的input提交并不会将填写信息提交，必须放在from表单里面;
• form表单：如果想要将填写的内容提交，把上边的标签放在form标签里面;

<--注释:
    # 默认情况下,form选择的方法是GET方法,会将填写信息显示在网址中，不安全;-->

<form action='提交的网址' method='提交操用的方法:POST|GET'>
    <input type='text' name='user'>
    <input type='password' name='passwd'>
    <input type='submit' value='submit'>
</form>

form实战项目

<--注释:
    # 1). 提交你要搜索的信息
    # 2). 提交
    # 3). 搜索-->

<form action="https://www.sougou.com/web">
    <input type='text' name='query' />
    <input type='submit' name='submit' />
<form>

注册页面需要的标签:

单选框

# 当有多个单选框时可以选中多个，不符合条件;
male:<input type="radio">


# 当有多个单选框时，都指定name为一个，单选时只会选择其中某一个;
male:<input type="radio" name='hello'>


# 里面有value值时，会通过GET方法传递给服务端，但必须嵌套在<form>标签里面;
male:<input type="radio" name='hello' value='1'>

单选框项目实战

<div>
    <form>
        <p>select gender:</p>
        male:<input type="radio" name="gender" value="1">
        female:<input type="radio" name="gender" value="2">
        <input type="submit" value="submit">
    </form>
</div>

复(多)选框

# 多个复选框可以批量获取多个数据,在后台以列表的格式保存;
<input type='checkbox' name='fav' value='1'>

# 设置复选框的默认值
<input type='checkbox' name='fav' value='1' checked='checked'>
或者
<input type='checkbox' name='fav' value='1' checked>

复选框实例

<div>
    <form>
     <p>hobbies</p>
            singing:<input type="checkbox" name="fav" value="1">
            dancing:<input type="checkbox" name="fav" value="2">
            running:<input type="checkbox" name="fav" value="3">
            <p>skills</p>
            TopCoder:<input type="checkbox" name="skill" value="1" >
            Shoot<input type="checkbox" name="skill" value="2">
            <br/>
            <input type="submit" value="submit">
        </form>
</div>

上传文件

# 此处指定名称，是为了提交到后台，对文件进行处理的
<input type='file' name='fname'>

上传文件实例

<div>
    # 此时上传文件并不会成功，因为它依赖form表单的一个属性enctype;
    # 表示把要上传的文件一点一点发送到服务端;
    <form enctype="multipart/form-data">
        <input type="file" name="fname">
        <br/>
        <input type="submit" value="submit">
    </form>
</div>

重置表单

# 取消表单中新填写的内容
<input type="reset" value="reset">