form表单与input框

form表单

功能：

表单用于向服务器传输数据，从而实现用户与web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和label标签。（这个先了解后续学习）

属性:

属性	描述
accept	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。如果是上传图片需要将属性变成enctype="multipart/form-data"
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

主要的属性有两个：action是提交地址，method是提交方式(也叫请求方式)，但是如果要牵扯到上传图片上面的就需要将enctype属性进行修改了

格式如下

<form action="" method="">
    
</form>

input标签

input标签会根据不同的type属性，变化为多种形态

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	< input type="password" />
date	日期输入框	< input type="date" />
checkbox	复选框	< input type="checkbox" checked="checked" />
radio	单选框	< input type="radio" />
submit	提交按钮	< input type="submit" value="提交" />
reset	重置按钮	< input type="reset" value="重置" />
button	普通按钮	< input type="button" value="普通按钮" />
hidden	隐藏输入框	< input type="hidden" />
file	文本选择框	< input type="file" />

input其它属性说明:

input默认的属性是text

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用，输入此属性后就会禁用这个input元素
hidden：用于隐藏input元素，但是它的数据还能用

然后代码如下

<!--input属性-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text"/><br>
<input type="password"><br>
<input type="data"><br>
<input type="checkbox"><br>
<input type="radio"><br>
<input type="submit"><br>
<input type="reset"><br>
<input type="button"><br>
<input type="hidden"><br>
<input type="file"><br>
</body>
</html>

效果如图

这里穿插一些知识，比如submit、reset、button属性生成的按钮可以修改名字只用来input里面将value这个属性拿来给它们赋值名字

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<input type="submit" value="登录"><br>
<input type="reset" value="刷新重置"><br>
<input type="button" value="超级按钮"><br>
</body>

</html>

效果如图

input主要还是给form表单做服务的

form与其它标签以及input的应用

在form表单标签里面input是最常用的表单标签，然后input里面的name属性是表单提交时的“键”,与id有区别

这里来演示一下带name属性是的情况

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="">
    用户名：<input type="text" name="user"><br>
    密码：<input type="password" name="pwd"><br>
    性别：<input type="radio" name="性别" value="男">男<input type="radio" name="性别" value="女">女<br>
    <input type="submit" value="登录">
</form>
</body>
</html>

这个代码里面为了实现单选框能正常使用先让这两个单选框的name都为同一个，然后在将value修改成不一样的就可以了。

效果如图

然后name的属性就能在浏览器请求中查看数据内容，这么做的目的就是将input输入的数据能带到后端里面去使用

这里将上面的input来放入form里面来使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="" method="" enctype="multipart/form-data">
    <div>
        <!--type是text属性-->
        用户名：<input type="text" name="user"><br>
    </div>
    <div>
        <!--type是password属性-->
        密码：<input type="password" name="pwd"><br>
    </div>
    <div>
        <!--type是radio属性-->
        性别：<input type="radio" name="性别" value="男">男<input type="radio" name="性别" value="女">女<br>
    </div>
    <div>
        <!--type是checkbox属性-->
        爱好：<input type="checkbox" name="爱好" value="篮球">篮球
            <input type="checkbox" name="爱好" value="游戏">游戏
            <input type="checkbox" name="爱好" value="钓鱼">钓鱼
            <input type="checkbox" name="爱好" value="逛街">逛街
            <input type="checkbox" name="爱好" value="吃美食">吃美食
    </div>
    <div>
        <!--type是file属性-->
        头像:<input type="file" name="头像">
    </div>

    <!--type是submit属性-->
    <input type="submit" value="登录">
    <!--type是reset属性-->
    <input type="reset" value="重置此内容">

    <input type="button" value="娱乐按钮">
</form>
</body>
</html>

效果如图

再来展示一下禁用以及隐藏的属性

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
<form action="" method="">
    <input type="text" value="456" name="user" disabled><br>
    <input type="password" value="123" name="pwd" hidden><br>
    <input type="submit" value="登录">
</form>
</body>

</html>

效果如图

select标签

select标签里面包含option标签

select标签

属性说明：

name是定义被发送到后端时的名字，id是它的在此html文档里面的识别值也就是专属的值。

option标签

属性说明:

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

验证代码如下

<!--select标签-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<form action="" method="">
    <select name="城市" id="city">
        <option value="1">北京</option>
        <option  value="2">上海</option>
        <option selected="selected" value="3">广州</option>
        <option value="4">深圳</option>
    </select>


</form>
</body>

</html>

这个代码里面使用了默认selected的属性来让广州变成第一个出现的

效果如图