HTML入门学习笔记02

桂花很香,旭很美

已于 2022-06-29 16:32:48 修改

阅读量405

点赞数 1

分类专栏：前端文章标签： html

于 2020-09-23 15:53:34 首次发布

本文链接：https://blog.csdn.net/weixin_40959890/article/details/108752973

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表单

表单标签form

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

作⽤: 收集浏览器⽤户进⾏输⼊的数据, 并把数据发送到服务器端
属性
- action：表示⽤户输⼊的内容, 被发送到服务器端的路径（servlet的一个地址）
- method：表单数据发送⽅式。常⽤的取值：GET、POST

<body>
     <!--表单-->
     <form action="#" method="get">
         <!--此处的内容可以被表单收集, 提交到服务器-->
     </form>
     <!--此处的内容在<form>标签外，此处数据表单收集不到, 不能提交到服务器-->
</body>

输⼊标签input

<input> 标签⽤于获得⽤户输⼊信息， type属性值不同，搜集⽅式不同。最常⽤的标签。（用户输入信息为value，name的内容为key，组成的键值对会在用户点击submit之后发送给服务器，没有name属性不会发送）

⽂本输⼊框:
- 属性type="text" | value="⽂本框的默认值" | placeholder="输⼊框预期值的提示信息" | name：发送给服务器的名称
密码输⼊框:
- 属性type="password" | placeholder="输⼊框预期值的提示信息" | name：发送给服务器的名称
单选按钮:
- 属性type="radio" | name="定义名字",同名的单选按钮可以保证单选 | checked="checked" 默认选中属性, 需要注意: 属性很特别,属性名和属性值⼀样,固定写法，name的属性内容如果不一样，就不是单选了，单选只是在name内容相同的选项中只选择一个，value属性不加内容（不写value属性）的话是不会将key（gender）和value（选中的value的赋值）发送给服务器的。
复选按钮:
- 属性type="checkbox" | checked="checked" 默认选中属性,也是不加value不发送内容
⽂件域:
- 属性type="file" | ⽂件上传服务器，name=“file” ，没有name提交不了
按钮:
- 普通按钮:
  - 属性 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" value="男" checked="checked"/>男
           <input type="radio" name="gender" value="女" />⼥ <br/>
     <!-- 复选按钮 -->
     爱　好:<input type="checkbox" checked="checked"/ value="smoke" name="hobby">抽烟
           <input type="checkbox" value="beer" name="hobby"/>喝酒
           <input type="checkbox" value="play card" name="hobby"/>打牌 <br />
    <!-- ⽂件域 --> 
    上传头像:<input type="file" name="file"/> <br />
    <!-- 普通按钮 -->
    <input type="button" value="点我提交"/>
    <!-- 重置按钮 -->
    <input type="reset" valure="还原为表单默认数据" />
    <!-- 提交按钮 -->
    <input type="submit" />
    <input type="image" src="/img/btn.jpg"/>
</form>

下拉菜单

<select> 下拉列表。可以进⾏单选或多选。需要使⽤⼦标签
- 属性name：发送给服务器的名称 | multiple属性：不写默认单选，取值为“multiple”表示多选（Ctrl+鼠标左键多选）。| size属性：多选时，可⻅选项的数⽬,显示不全时，可以滚动条滚动显示。
<option> ⼦标签：属于下拉列表中的⼀个选项（⼀个条⽬）。
- 属性selected ：勾选当前列表项 | value ：发送给服务器的选项值

<form action="#" method="get">
     <!-- 下拉列表 -->
     <select name="city" multiple="multiple" size="5">
         <!--提示-->
         <option value="">请选择所在的城市</option>
         <!-- 列表项 -->
         <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>

多行文本域

<textarea> ⽂本域。多⾏的⽂本输⼊控件。

cols属性：⽂本域的列数（字符）
rows属性：⽂本域的⾏数

<form action="#" method="get">
     <!-- 多⾏⽂本域 -->
     <textarea name="area" cols="50" rows="8"></textarea>

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

提交方式区别

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

GET:
- 表单提交的参数,放在浏览器地址栏, 暴露敏感数据; 浏览器的地址栏数据有限的,不适合提交过⼤的数据
  - ?user=tom&pass=123&gender=⼥&hobby=抽烟&hobby=喝酒
  - 数据的格式 k=v 多个键值对使⽤ & 分割
  - 服务器获取提交的数据,依靠是键
POST:
- 表单提交的参数,不会显示在地址栏上，而是在http协议的请求体（request body）中; 不会暴露敏感信息; 没有数据⼤⼩的限制

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>

div标签span标签

div标签: div 块级元素标签
- 霸占屏幕的⼀⾏, 就是⻚⾯中的⼀个⾏
- 配合CSS样式表使⽤
span标签: span ⾏级元素标签
- 不会占屏幕⼀⾏
- 配合CSS样式表

<body>
     1<div>我是div</div>2
     3<span>我是span</span>4
</body>

桂花很香,旭很美

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门学习笔记02

表单表单标签form<form> 表单标签，表单标签在浏览器上没有任何显示。作⽤: 收集浏览器⽤户进⾏输⼊的数据, 并把数据发送到服务器端属性 action：表示⽤户输⼊的内容, 被发送到服务器端的路径（servlet的一个地址） method：表单数据发送⽅式。常⽤的取值：GET、POST <body>  <form action="#" method="get">
复制链接

扫一扫