在学习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">