html 表单

1)网页导航

<nav>

<ul>
<li>首页</li>
<li>母婴用品</li>
<li>家居用品</li>
</ul>
 

       </nav>

  <section>元素
         section:小节
该元素标识网页内容中的某一具体部分。定义文章章节、内容的楼层(购物类网站居多)
    <article>元素
         article:文章,内容 。。。
         在论坛中表式某一具体帖子信息、新闻类网站的某一具体新闻信息、博客类网站具体博客条目、用户评论等
      <footer>元素
         定义网页底部信息,多用于企业介绍、标识等部分内容
等同于 <div id="footer"></div>
   <aside>元素
         侧边栏,可以标识正规内容额外的部分内容
边栏内容优先使用<aside>元素
2)表单
   1、表单的作用
      1、显示、收集用户信息
      2、将收集到的信息提交给服务器
   2、表单语法
      语法:<form></form>
      注意:表单中的内容是可以提交给服务器的,提交给服务器的内容要放在表单元素里
      属性:
          action : 表单提交时的动作,提交地址,值为url,默认值为本页
 method : 提交方式,常用取值:get或post
    get(默认值) : 明文提交,安全性较低,提交数据大小有限制,为2kb(根据浏览器决定)
    post : 密文提交,安全性较高,无大小限制


    注意:用户登录、用户注册一律使用post提交
          向服务器索取数据时(搜索引擎搜索数据),可以使用get,也可以使用post
 enctype : 表单数据的编码方式
      取值 :  
          1、application/x-www-form-urlencoded(默
  认)
     可以将正常字符、特殊符号(&)提交给服务器(不支持文件上传)
  2、text/plain
     可以将正常字符提交给服务器
  3、multipart/form-data
     如果上传文件的时候,必须使用该值
 name : 定义表单名称
 <form action="...." method="post/get">
   ....
 </form>


   3)表单元素 
      表单元素指的是出现在表单中能够与用户进行交互的控件
      表单元素分类:
         1、input元素:由input标签组成的
2、textarea元素:<textarea> ,多行文本域
3、select 和 option :下拉框
4、其他元素
      1、input元素
         input元素是空标记 <input />
属性:
    type : 可以创建各种类型的input元素,比如:文本框、密码框、单选按钮、复选框
    value : 当前表单元素的值,可以是提交给服务器的值,也可以是默认显示的初始值
    name : 名称,要提交给服务器去使用
    id : 唯一标识,只能在当前页面使用,服务器不能用
    disabled : 禁用控件
1、文本框
   type="text"
   <input type="text" />
   注意:如果type不写,或不在指定值范围内,那么默认都为 text 
   <input />
   <input type="abcdefg" />
2、密码框
   以密文的方式接收和显示用户的数据
   type="password"
   <input type="password" />
以上两个控件的通用属性:
   1、name,id,value,提示语
   2、maxlength : 限制输入的字符数
   3、readonly : 设置控件为只读
3、单选按钮
   type="radio"
   <input type="radio" />
   name : 定义名称、分组
   value : 值
   checked : 默认被选中
4、复选框
   能够实现多选的控件
   type="checkbox"
   <input type="checkbox" />
   name :定义名称、分组
   value :
   checked :
5、按钮
   1、提交按钮
      功能固定化,用于将表单的数据提交给服务器
      语法:
      type="submit"
      <input type="submit" value="按钮上的文字" />
   2、重置按钮
      功能固定化,将表单控件值恢复到默认状态
      语法:
      type="reset"
      <input type="reset" value="文本" />
   3、普通按钮
      没有任何功能的标准按钮,用于执行客户端脚本(自定义功能)
      语法:
      <input type="button" value="文本" />
 6、文件选择框
    <input type="file" />
    注意:如果有文件上传的话,必须将表单的enctype更改为 multipart/form-data,同时method必须为post
 7、隐藏域
    <input type="hidden" name="" value="" />
    使用场合:隐藏域在页面中是看不到的,一般会配合后台开发一起使用,从来不单独使用。
2、get提交数据的格式
  url?name=value&name1=value1&name2=value2 ...
  ...test.jsp?uName=SanFeng&uPass=Hello&gender=3




      2、选项框
         别名:下拉框、下拉列表
1、下拉列表
2、滚动列表
语法:
<select></select>
属性:
   name : 定义名称
   size : 大于1,则为滚动列表,否则,九十下拉列表
   multiple : 设置多选
<option></option>
属性:
    value : 选项的值
    selected : 预选中
<select name="province">
<option value="0451">黑龙江</option>
<option value="0431">吉林</option>
<option value="021">辽宁</option>
</select>
     3、多行文本域
        语法:
<textarea>默认显示文本</textarea>
属性:
  name : 名称
  cols : 指定文本域的列数,一行能显示多少个字符,表示宽度(以字符个数为单位)
  rows : 指定文本域的行数,如果真是数据超出设定行数,将出现滚动条,表示高度
readonly:只读
     4、其他表单元素 - <label>
        关联文本 与 表单元素 
语法:
<label>文本</label>
属性:
  for : 表示与该元素相关联的控件的ID值 
3、其他标记
   1、浮动框架
      在一个浏览器中同时显示多个页面文档
      语法:
        <iframe></iframe>
       属性:
          src : 引入的网页路径(url)
 width : 宽度
 height : 高度
 frameborder : 边框
      注意:尽可能的少使用 iframe 元素
   2、摘要与细节
      将一部分内容进行 收缩或展开 的动作
      语法:
      <details>
<summary>标题</summary>
显示的内容
      </details>
   3、度量元素
      语法:
      <meter></meter>
      属性:
         min : 度量范围的最小值,默认为0
max : 度量范围的最大值,默认为1
value : 当前的度量值,默认为0
   4、时间元素
      语法:
      <time datetime="时间值">显示的文本</time>
   5、分组元素
      <fieldset>
<legend></legend> 定义组标题
显示内容
      </fieldset>定义组
   6、高亮文本显示
      以突出的方式显示一段文本
      语法:<mark>高亮显示的文本</mark>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值