Loading

HTML表单

1 表单标签form

在这里插入图片描述

<form> 表单标签，表单标签在浏览器上没有任何显示。

  • 作用: 收集浏览器用户进行输入的数据, 并把数据发送到服务器端
  • 属性
    • action：表示用户输入的内容, 被发送到服务器端的路径
    • method：表单数据发送方式。常用的取值：GET、POST
<body>
    <!--表单-->
    <form action="#" method="get">
        <!--此处的内容可以被表单收集, 提交到服务器-->
    </form>
    <!--此处的内容在<form>标签外，此处数据表单收集不到, 不能提交到服务器-->
</body>

2 输入标签input

在这里插入图片描述

<input> 标签用于获得用户输入信息，type属性值不同，搜集方式不同。最常用的标签。

  • 文本输入框: 属性type="text" | value="文本框的默认值" | placeholder="输入框预期值的提示信息" | name：发送给服务器的名称
  • 密码输入框: 属性type="password" | placeholder="输入框预期值的提示信息" | name：发送给服务器的名称
  • 单选按钮: 属性type="radio" | name="定义名字",同名的单选按钮可以保证单选 | checked="checked" 默认选中属性, 需要注意: 属性很特别,属性名和属性值一样,固定写法
  • 复选按钮: 属性type="checkbox" | checked="checked" 默认选中属性
  • 文件域: 属性type="file" | 文件上传服务器
  • 按钮:
    • 普通按钮: 属性 type="button" | value="按钮上显示文本"用于配合后面的技术JavaScript
    • 重置按钮: 属性 type="reset"
    • 提交按钮: 表单数据发送到服务器提交按钮: 属性 type="submit"图片按钮: 属性 type="image"
<form action="#" method="get">
    <!-- 文本输入框 -->
    用户名:<input type="text" value="" placeholder="请输入用户名" name="user"/> <br/>
    <!-- 密码输入框 -->
    密　码:<input type="password" placeholder="请输入密码" name="pass"/> <br/>
    <!-- 单选按钮 -->
    性　别:<input type="radio" name="gender" checked="checked"/>男
          <input type="radio" name="gender" />女 <br/>
    <!-- 复选按钮 -->
    爱　好:<input type="checkbox" checked="checked"/ name="hobby">抽烟
          <input type="checkbox" name="hobby"/>喝酒
          <input type="checkbox" name="hobby"/>打牌 <br />
    <!-- 文件域 -->        
    上传头像:<input type="file" /> <br />
    <!-- 普通按钮 -->
    <input type="button" value="点我提交"/>
    <!-- 重置按钮 -->
    <input type="reset" />
    <!-- 提交按钮 -->
    <input type="submit" />
    <input type="image" src="img/btn.jpg"/>
</form>

3 下拉菜单

在这里插入图片描述

  • <select> 下拉列表。可以进行单选或多选。需要使用子标签

    • 属性name：发送给服务器的名称 | multiple属性：不写默认单选，取值为“multiple”表示多选。| size属性：多选时，可见选项的数目。

  • <option> 子标签：属于下拉列表中的一个选项（一个条目）。

    • 属性selected ：勾选当前列表项 | value ：发送给服务器的选项值
<form action="#" method="get">
    <!-- 下拉列表 -->
    <select name="city" multiple="multiple" size="5">
        <!-- 列表项 -->
        <option value ="beijing">北京</option>
        <option value ="shanghai">上海</option>
        <option value ="guangzhou">广州</option>
        <option value ="shenzhen">深圳</option>
        <option value ="hangzhou">杭州</option>
        <option value ="tianjin">天津</option>
    </select>

    <input type="submit" />
</form>

4 多行文本域

在这里插入图片描述

<textarea> 文本域。多行的文本输入控件。

  • cols属性：文本域的列数
  • rows属性：文本域的行数
<form action="#" method="get">
    <!-- 多行文本域 -->
    <textarea name="area" cols="50" rows="8"></textarea>

    <input type="submit" />
</form>

5 提交方式区别

服务器提交方式GET和POST区别

  • GET:表单提交的参数,放在浏览器地址栏, 暴露敏感数据; 浏览器的地址栏数据有限的,不适合提交过大的数据 ?user=tom&pass=123&gender=女&hobby=抽烟&hobby=喝酒 数据的格式 k=v 多个键值对使用 & 分割 服务器获取提交的数据,依靠是键

    url?key1=val1&key2=val2&key3=val3

  • POST:表单提交的参数,不会显示在地址栏上; 不会暴露敏感信息; 没有数据大小的限制

HTTP协议区别:

  • GET: 参数放在请求行
  • POST: 参数放在请求体
<form action="#" method="post">
    用户名<input type="text"  placeholder="请输入用户名" name="user"/><br />
    密　码<input type="password" placeholder="请输入密码" name="pass" /> <br />
    性　别<input type="radio" name="gender" checked="checked" value="男"/> 男 
         <input type="radio" name="gender" value="女"/> 女 <br />

    爱　好<input type="checkbox" name="hobby" checked="checked" value="抽烟"/>抽烟
         <input type="checkbox" name="hobby" value="喝酒"/>喝酒
         <input type="checkbox" name="hobby" value="打牌"/>打牌 <br />

    <input type="submit" />
</form>
posted @ 2021-03-25 19:58  克豪  阅读(78)  评论(0)    收藏  举报