1、内联框架标签
<iframe src="引用页面地址"name="框架标识名" frameborder="0" width="宽度值"height="高度值"></iframe>
注:frameborder="0"为框架边框属性
2、表单语法
<form action="第一个网页.html" method="post"target="_blank">
<p>账号:<input type="text"name="zhang"></p>
<p>密码:<input type="password"name="pwd"></p>
<p>
<input type="submit" value="提交">
<input type="reset"value="重置">
</p>
</form>
注:
action为表单发送地址,可以是一个网址也可以是一个请求处理地址
method规定如何发送数据常用get、post
get方式提交:可以在URL(统一资源定位符又叫网页地址)中看到我们提交的信息,不安全,高效
post方式提交:比较安全,传输大文件
3、表单元素
value="":元素默认初始值,type为radio时必须指定一个值
maxlength="":type为text或password时最长能写几个字符
name=“”:指定表单元素的名称
checked=“”:type为radio或CheckBox时,指定按钮是否被选中
size=“”:指定表单元素的初始宽度,当type为text或password时,表单元素大小以字符为单位,其他类型宽度以像素为单位
4、单选框标签
<form>
<p>性别:
<input type="radio"name="sex"value="boy"checked>男
<input type="radio"name="sex"value="girl">女
</p>
</form>
注:
input type="radio"单选框标签
radio必须要写value="boy"
name为分组,相同name为一组
checked为默认选项
5、多选框标签
<form>
<p>工作:
<input type="checkbox" value="cs"name="1"checked>测试
<input type="checkbox"value="qd"name="1">前端
<input type="checkbox"value="kf"name="1">开发
<input type="checkbox"value="yw"name="1">运维
</p>
</form>
注:
input type="checkbox"多选框标签
name为分组,相同name为一组
checked为默认选项
6、按钮标签
<form>
<p>
<input type="button"name="btn"value="按钮">
<input type="image"src="image/1.jpg">
</p>
</form>
注:
input type="button"普通按钮
input type="image”图片按钮,需要写src图片地址,点击有提交功能
input type="submit"提交按钮
input type="reset"重置按钮,点击后重置表单内容
7、列表框(下拉框)、文本域,文件域
下拉框标签语法
<form>
<p>下拉框:
<select name="工作" >
<option value="zhg">中国</option>
<option value="mg" selected>美国</option>
<option value="rb">日本</option>
</select>
</p>
</form>
注:
<select></select>下拉框标签
option value="选项值"
selected默认选项
文本域
<form>
<p>反馈:
<textarea name="输入反馈意见" cols="30" rows="10"></textarea>
</p>
</form>
注:
<textarea></textarea>文本域标签
cols="列数"、rows="行数"
文件域标签:<input type="file">
<form>
<p>
<input type="file"name="上传文件">
</p>
</form>
8、简单验证、滑块、搜索框
简单验证:
邮箱(email)验证:<p>邮箱:<input type="email"name="email"></p>
网址(url)验证:<p>URL:<input type="URL"name="URL"></p>
数字(number)验证:<p>数字:<input type="number"name="number" max=“100”min="0" step="10"></p> <!--step为每次增加或减少的数-->
滑块(range):<p>滑块:<input type="range"name="滑块" max="100" min="0"></p>
搜索框(search):<p>搜索框:<input type="search"name="搜索"></p>
9、表单属性
隐藏域:hidden
禁用:disabled
只读:readonly
增强鼠标可用性(使鼠标点击文字也可以编辑):label标签指向表单对应标签id实现点击文字可以进入表单编辑
<p>
<label for="01">搜索框:</label>
<input type="search"name="搜索" id="01" >
</p>
10、表单初级验证
placeholder ="提示信息" 提示信息验证
required 非空判断
pattern="正则表达式" 正则表达式验证(百度查找相关功能正则表达式)
<p>自定义邮箱:
<input type="text"pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"name="em">
</p>