html中表单标签详解

最新推荐文章于 2024-09-16 19:48:09 发布

枸杞配红枣

最新推荐文章于 2024-09-16 19:48:09 发布

阅读量615

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/qq_41586079/article/details/82936876

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.表单标签

*可以提交数据到服务器

*<form></form>定义一个表单的范围

-属性

**action 提交到地址，默认提交到当前页面

**method 表单的提交方式

-常用的有两种：get和post，默认是get请求

-get请求栏会携带提交的数据，而post不会；

-get请求安全性低，post较高

-get请求有数据大小的限制，而post没有限制

**encype：一般请求下不需要这个属性，做文件上传需要这个属性

**输入项：可以输入内容或选择内容的部分

-大部分的输入项，使用<input type="输入项的类型"/>

***普通输入项:<input type="text"/>

<body>
    登录：<input type="text"/>
</body>

***密码输入项:<input type="password"/>

<body>
    登录：<input type="text"/><br/>
    密码：<input type="password"/>
</body>

***单选输入项 <input type="radio"/>

-这里需要一个属性才能选择，name

-name的属性值相同才能保证单选

-必须有一个value值

--实现默认选中的

添加属性：checked="checked"

性别：<input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女

***复选输入项<input type="checkbox"/>

-这里需要一个属性才能选择，name

-name的属性值相同

-必须有一个value值

兴趣：<input type="checkbox" name="birth" value="羽毛球"/>羽毛球
    <input type="checkbox" name="birth" value="足球"/>足球
    <input type="checkbox" name="birth" value="篮球球"/>篮球

***文件输入项（文件上传）

文件：<input type="file"/>

***下拉输入项

</select>

实现默认选择

selected="selected"

生日：<select name="birth">
            <option value="0">请选择</option>
            <option value="1998">1991</option>
            <option value="1997">1997</option>
            <option value="1996">1996</option>
          </select>

***文本域

自我描述：<textarea ></textarea>

***隐藏项（不会显示在页面上，但是存在在html代码中）

***提交项

<input type="submit" value="立即注册"/>

***使用图片提交

**重置按钮回到输入项的初始状态

 <input type="reset" value="重新输入"/>

**普通按钮和js一起使用

我将此次的源码及编译结果发出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>
<body>
<form action="text.html" method="get">
    登录：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"><br/>
    性别：<input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女<br/>
    兴趣：<input type="checkbox" name="birth" value="羽毛球"/>羽毛球
    <input type="checkbox" name="birth" value="足球"/>足球
    <input type="checkbox" name="birth" value="篮球球"/>篮球<br/>
    文件：<input type="file"/><br/>
    生日：<select name="birth">
            <option value="0">请选择</option>
            <option value="1998">1991</option>
            <option value="1997">1997</option>
            <option value="1996">1996</option>
          </select><br/>
    自我描述：<textarea name="text"></textarea><br/>
    <input type="submit" value="立即注册"/>
    <input type="reset" value="重新输入"/>
</form>
</body>
</html>