HTML获取用户输入的几种玩法

input标签

input是一个自闭和标签，可以获得用户的输入

form标签

form标签是用来进行表单提交用的，它把用户的输入内容提交到服务器。

一个注册页面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="3">-->
    <!--<meta http-equiv="refresh" content="3;Url=http://www.baidu.com">-->
    <meta name="keywords" content="商城">
    <meta name="description" content="网购来这里">
    <title>商城</title>
</head>
<body>
<div>
    <form enctype="multipart/form-data">
        <div>请输入注册信息</div>
        <select name="city">
            <option value="1" selected="selected">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
        <input type="text" name="user" value="请输入用户名"/>
        <input type="password" name="password" />
        <p>请输入你的性别</p>
        男：<input type="radio" name="sex" value="1" checked="checked"/>
        女：<input type="radio" name="sex" value="2"/>
        <p>请输入你的爱好</p>
        足球：<input type="checkbox" name="hobby" value="1" checked="checked"/>
        蓝球：<input type="checkbox" name="hobby" value="2"/>
        红球：<input type="checkbox" name="hobby" value="3"/>
        紫球：<input type="checkbox" name="hobby" value="4"/>
        <p>请选择上传的附件</p>
        <input type="file"/>
        <div>
            <textarea>备注</textarea>
        </div>
        <div>
        <input type="reset"/>
        <input type="submit" value="登陆"/>
        </div>

    </form>
</div>
</body>
</html>

form标签是一个表单，它会把表单内部用户输入或选择的信息后端服务器，

form里面可以指定与后端服务器沟通的地址以及方法。

input标签在页面上展示就是一个输入框，定义了你要输入的是文本还是密码，并给每一个输入框定义了一个名字，方便后端服务器分辨是那个输入框输入进来的数据。最后一个type=“submit”是一个登陆按钮。

input系列属性

input type=“test”　　　　 - 提交文本，

input type=“passwd” 　　 -提交密码

input type=“submit” 　　 -提交按键

input type=“buttom” 　　 -按键

input type=“radio” 　　　　-单选框

input type=“checkbox” 　 -多选框

input type=“file”　　　　　 -上传文件按钮（需要依赖form表单的一个属性enctype="multipart/form-data"）

input type=“reset” 　　　　-重置按钮

name="hobby"　　　　　　-通过name属性来让后端服务器识别，用户勾选的是什么框

value="1"　　　　　　　　 -通过value属性，让后端服务器识别，用户勾选属性的值。

checked="checked" -通过checked属性，设置默认勾选的值。

select标签

select是一个下拉选择框

name="city"　　　　　　　-定义下拉框的属性

option标签

包含在select标签内部，构成一个个的选项。

value="1"　　　　　　　　-选项的值，便于后端服务器的获取。

至此位置，HTML获取用户输入以及与后端服务器进行交互的方式你已经学到。

若想看网页结果，请直接复制代码然后用浏览器打开即可。