HTML基础3

本节大纲

  • 表单form、输入域input、多行文本域textarea、label、下拉框select、按钮button
  • h5新增表单
  • iframe
  • 单位

课程内容

form

  • 作用:用于把用户输入的数据提交到后台
  • name: 表单提交时的名称
  • action: 提交到的地址
  • method: 提交方式,get和post

代码 demo

<form name="myForm" action="/test/6.php" method="get">
    <input name="user" type="text" />
    <input type="submit" value="提交" />
</form>

post和get方式的区别? 1. 数据提交方式不同,get把提交的数据url可以看到,post看不到 2. get一般用于提交少量数据,post用于提交大量数据 3. get最多提交1k数据,浏览器的限制。post理论上无限制,受服务器限制 4. get提交的数据在浏览器历史记录中,安全性不好

input

输入表单,有以下几种常用类型

代码

  • type="text": 用于输入文本。placeholder属性(可选)展示的是输入框里的提示,maxlength(可选)限制最大输入长度;

<!-- 要加上name -->
<input name="username" type="text" placeholder="用户名" maxlength=10 />    
  • type="password": 用于输入密码,输入的内容显示为星号。

<input name="password" type="password" placeholder="密码" />
  • type="radio": 单选圆圈按钮。注意:name要相同才能实现单选,value要有值

<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女
  • type="checkbox": 复选框。加checked属性会默认选上。提交时,如果选中(如bike),则bike=on

<input type="checkbox" name="bike"  checked/>自行车
<input type="checkbox" name="car" />汽车
  • type="textarea": 文本域,用于输入多行文本

<textarea name="maneywords" maxlength=10 placeholder="ddd"></textarea>
  • type="hidden": 隐藏域,用户看不到,用于暂存数据。或者安全性校验

<input name="url_delete" type="hidden" value="/delete.php" />
<input name="csrf_token" type="hidden" value="a23dafd23444" />

select

选择列表,selected属性会默认选中该项目

<form action="/test/6.php"> 
    <select name="mycar">
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi" selected>Audi</option>
    </select>
    <button type="submit">提交</button>
</form>

html5 input新类型

参考html5 w3c

注意点

  • 所有的input可以添加属性 disabled来禁用输入
  • input都要有name属性

iframe

在一个页面中嵌入另一个网页

<iframe src="page.html"></iframe>

首先看到的是hunger页面,点击链接打开w3cshool页面

<iframe src="http://www.hunger-train.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">W3Cschool.cc</a></p>

补充

常用单位: px, em, rem;

参考px,em,rem区别

课下练习

  1. 写一个form表单, 用post方式提交。提交内容包括用户名,密码,select, radio
  2. 使用iframe做个列表展示页面(类似于w3school),分左右两部分,左边显示列表,点击列表链接右边展示对应页面。