vscode——HTML——表单

最新推荐文章于 2024-06-23 17:20:55 发布

iheyu

最新推荐文章于 2024-06-23 17:20:55 发布

阅读量4.7k

点赞数 5

文章标签： text纯文本 http超文本传输协议 select下拉框 GET POST

本文链接：https://blog.csdn.net/iheyu/article/details/99973508

版权

1.表单是收集用户信息输入——>发送——>或提交给服务器：

2.表单分为二大类：

1.输入：内容——>文本——>普通和密码——>单选框——>多选框——>下拉框；

2.提交：提交按钮——>http：——>超文本传输协议——>主要保持客户级和服务级的通信——>浏览器和服务器的通讯；

3.模式：请求——>应答——>浏览器主动的发起请求——>服务器接受请求——>自身做处理——>把请求的结果反回给浏览器——>浏览器根据结果把内容展示出来；

3.跟表单有关联的标签：

1.<from></from>——>文本内容<input>标签——>type属性——>对应输入方式——>text——>纯文本内容；

2.做简单的"用户注册页面"——>代码段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
    <form action="">
        用户名：<input type="text">
        密码：<input type="password">
        <input type="submit">

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

***注意小白们不要把form写成了from****

填写用户名和密码点击提交没有反应——>还需要在加一些其他属性——>name属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="usr"><br>
        密码：<input type="password" name="pas"><br>
        <input type="submit">

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

提交信息后——>用户名和密码都在浏览器的地址框中

3.单选框——>如果名字一样就是一组——>要在名字一样地方做选择；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="usr"><br>
        密码：<input type="password" name="pas"><br>
        性别：<input type="radio" name="sex"> 男
             <input type="radio" name="sex"> 女
             <input type="radio" name="sex">中性<br>
             <input type="submit">
             
    </form>
</body>
</html>

***name不一样就是不同的组***

4.复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="usr"><br>
        密码：<input type="password" name="pas"><br>
        性别：<input type="radio" name="sex"> 男
             <input type="radio" name="sex"> 女
             <input type="radio" name="sex">中性<br>
    兴趣爱好：<input type="checkbox" name="ckb">游泳
             <input type="checkbox" name="ckb">看视频   
             <input type="checkbox" name="ckb">逗嘟嘟 
             <input type="checkbox" name="ckb">逛街    
             <input type="submit">
             
    </form>
</body>
</html>

5.下拉框——><select></select>标签——>"option选项"属性——><option></option>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="usr"><br>
        密码：<input type="password" name="pas"><br>
        <!--单选框-->
        性别：<input type="radio" name="sex"> 男
             <input type="radio" name="sex"> 女
             <input type="radio" name="sex">中性<br>
    <!--复选框-->       
    兴趣爱好：<input type="checkbox" name="ckb">游泳
             <input type="checkbox" name="ckb">看视频   
             <input type="checkbox" name="ckb">逗嘟嘟 
             <input type="checkbox" name="ckb">逛街 <br>
        <!--下拉框-->    
        城市：<select name="city">
                <option value="">沈阳</option>
                <option value="">桐乡</option>
                <option value="">珠海</option>
              </select> <br>    
             <input type="submit">
             
    </form>
</body>
</html>

6.所以选都有一个默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="usr"><br>
        密码：<input type="password" name="pas"><br>
        <!--单选框-->
        性别：<input type="radio" name="sex" value="male"> 男
             <input type="radio" name="sex" value="female"> 女
             <input type="radio" name="sex">中性<br>
    <!--复选框-->       
    兴趣爱好：<input type="checkbox" name="ckb" value="swim">游泳
             <input type="checkbox" name="ckb" value="watch videos">看视频   
             <input type="checkbox" name="ckb"  value="piay with dog">逗嘟嘟 
             <input type="checkbox" name="ckb" value="shopping">逛街 <br>
        <!--下拉框-->    
        城市：<select name="city">
                <option value="sy">沈阳</option>
                <option value="tx">桐乡</option>
                <option value="zh">珠海</option>
              </select> <br>    
             <input type="submit">
             
    </form>
</body>
</html>

4.表单提交方式：

1.GET——>内容在网址里面；

2.POST——内容放在http的头里面；

action属性——>对应的提交网址——>action不填就默认当前网址——><form action="2.html">——>代码控制传输的那个文件；

method属性——>默认值是GET——><form action="2.html" method="POST">——>post传的值网址没有变化——>内容放在http的头里面；

iheyu

关注

5
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
vscode——HTML——表单

1.表单是收集用户信息输入——>发送——>或提交给服务器：2.表单分为二大类：1.输入：内容——>文本——>普通和密码——>单选框——>多选框——>下拉框；2.提交：提交按钮——>http：——>超文本传输协议——>主要保持客户级和服务级的通信——>浏览器和服务器的通讯；3.模式：请求——>应答——>浏览...
复制链接

扫一扫