html5-5 HTML5表单元素和内嵌框架

html5-5   HTML5表单元素和内嵌框架

一、总结

一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了

1、html5如何实现文件上传?

必须加上enctype='multipart/form-data'

23     <form action="reg.php" method='post' enctype='multipart/form-data'>
24 <p>用户名:</p>
25 <p><input type="text" name='username'></p>

2、html5复选框如何传值?

name值后面加中括号

<input type="checkbox" name="love[]"> 打篮球
<input type="checkbox" name="love[]"> 踢足球

3、html属性disable和readonly的区别是什么?

readonly可以带值

readonly 可以带值
disabled 不能带值

4、html中限制表单提交最大长度的属性是什么?

maxlength属性

maxlength 最大长度

5、iframe内嵌框架有什么用?

内嵌别人做好的网页,比如百度的查身份证的功能

6、单选框和多选框选的时候如何能实现不瞄着点选?

外面加label就可以实现选后面文字也可以选中了

51             <label><input type="checkbox" name="love"> 打篮球</label>
52 <label><input type="checkbox" name="love"> 踢足球</label>

二、HTML5表单元素和内嵌框架

1、相关知识

表格:
<table width='100%' border='1px' cellspacing='0px'>
    <tr>
        <th>adlf</th>
        <th>adlf</th>
        <th>adlf</th>
    </tr>
    <tr>
        <td>aa</td>
        <td>aa</td>
        <td>aa</td>
    </tr>
</table>

表单:
<form action="reg.php" method='post' enctype='multipart/form-data'>
        
</form>

表单元素:
1.文本元素
<input type="text" name='username'>

2.密码元素
<input type="password" name='password'>

3.文件元素
<input type="file" name="img">

4.确认元素
<input type="submit" value="确认">

5.重置元素
<input type="reset" value="重置">

6.下拉菜单
<select name="city">
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="">广州</option>
</select>

7.单选
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex"> 中

8.多选
<input type="checkbox" name="love[]"> 打篮球
<input type="checkbox" name="love[]"> 踢足球
<input type="checkbox" name="love[]"> 开大车

9.文本域
<textarea name="mess" cols="30" rows="10"></textarea>

表单属性:
readonly 可以带值
disabled 不能带值
maxlength 最大长度

iframe内嵌框架:
<iframe src="http://localhost/web" frameborder="0"></iframe>

frame框架:
<frameset rows="60,*" frameborder='1' border='1px'>        
    <frame src='top.html' name='top'>
    <frameset cols='100,*'>
        <frame src='left.html' name='left' noresize>
        <frame src='right.html' name='right'>
    </frameset>
</frameset>

点左侧的a链接如何打开右侧页面:
<a href='user/index.html' target='right'><button>查看用户</button></a>

如何在一个窗口中退出到最外层的窗口:
<a href="login.html" target='_top'><button>退出</button></a>

2、代码

html5-5   HTML5表单元素和内嵌框架

html5-5   HTML5表单元素和内嵌框架

表单完整实例

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} td{
text-align:left;
height:40px;
} textarea{
resize:none;
}
</style>
</head>
<body>
<h1>请注册:</h1>
<form action="reg.php" method='post' enctype='multipart/form-data'>
<p>用户名:</p>
<p><input type="text" name='username'></p>
<p>密码:</p>
<p><input type="text" name='password'></p>
<p>文件上传:</p>
<p><input type="file" name='repassword'></p>
<p>邮箱:</p>
<p><input type="text" name='mail'></p> <p>选择收货地址:</p>
<p>
<select name="city">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
</p> <p>性别:</p>
<p>
<label><input type="radio" name="sex"> 男</label>
<label><input type="radio" name="sex"> 女</label>
<label><input type="radio" name="sex"> 中</label>
</p> <p>爱好:</p>
<p>
<label><input type="checkbox" name="love"> 打篮球</label>
<label><input type="checkbox" name="love"> 踢足球</label>
<label><input type="checkbox" name="love"> 开大车</label>
<label><input type="checkbox" name="love"> 理发</label>
</p> <p>请留言:</p>
<textarea name="mess" cols="100" rows="5"></textarea> <p>
<input type="submit" value='Ok'>
<input type="reset" value='Cancel'>
</p>
</form>
</body>
</html>
 
 
 
 
上一篇:HTML5 canvas 内部元素事件响应


下一篇:html5如何实现元素拖放