1.表单
- 基本结构
示例代码:
<form action="https://www.baidu.com/s" target="_blank" method="get"> <input type="text" name="wd"> <button>去百度搜索</button> </form>- 常用表单控件
1、文本输入框
2、密码输入框
3、单选框
4、复选框
5、隐藏域
6、提交按钮
7、重置按钮
8、普通按钮
9、文本域
10、下拉框
- 禁用表单控件
- label标签
label 标签可与表单控件相关联,关联之后点击文字,与之对应的表单控件就会获取焦点。
两种与 label 关联方式如下:
- 让 label 标签的 for 属性的值等于表单控件的 id 。
- 把表单控件套在 label 标签的里面。
- fieldset 与 legend 的使用(了解)
<fieldset> <legend>主要信息</legend> <label for="zhanghu">账户:</label> <input id="zhanghu" type="text" name="account" maxlength="10"><br> <label> 密码: <input id="mima" type="password" name="pwd" maxlength="6"> </label> <br> 性别: <input type="radio" name="gender" value="male" id="nan"> <label for="nan">男</label> <label> <input type="radio" name="gender" value="female" id="nv">女 </label> </fieldset>- 表单总结
框架标签
HTML实体
在 HTML 中我们可以用一种特殊的形式的内容,来表示某个符号,这种特殊形式的内容,就是 HTML 实
体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符,我们必须
在 HTML 源码中插入字符实体。
常见字符实体总结
作业
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>个人信息</title> <style> </style> </head> <body> <table border="5" width="900" cellspacing="0"> <thead> <tr> <th colspan="7" align="center">个人信息</th> </tr> </thead> <tbody> <tr> <td rowspan="3"> <img src="通达校徽.jpg" alt="通达校徽" width="100"> </td> <td width="65" bgcolor="skyblue">姓名</td> <td> <form> <input type="text" placeholder="请输入姓名" > </form> </td> <td width="65" bgcolor="skyblue">年龄</td> <td> <select> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select> </td> <td rowspan="3" width="130"> <a href="http://jwxt.nytdc.edu.cn/jwglxt/xtgl/login_slogin.html">前往查询个人课表</a> </td> <td rowspan="3" width="110"> 学习目标:<br><br> 1.勤学善思<br> 2.笃学立行<br> 3.慎思笃行 </td> </tr> <tr> <td bgcolor="skyblue" align="center">性别</td> <td> <form> <input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女 </form> </td> <td bgcolor="skyblue">专业</td> <td> <select> <option value="计科">计算机科学与技术</option> <option value="软件工程">软件工程</option> <option value="物联网工程">物联网工程</option> </select> </td> </tr> <tr> <td bgcolor="skyblue" align="right">爱好</td> <td> <form> <input type="checkbox" name="hobby" value="read">阅读 <input type="checkbox" name="hobby" value="listen">听歌 <input type="checkbox" name="hobby" value="run">跑步 <input type="checkbox" name="hobby" value="manage" checked>敲代码 </form> </td> <td bgcolor="skyblue" valign="bottom">自我介绍</td> <td> <textarea name="msg" cols="20" rows="5" placeholder="我喜欢敲代码,希望认识很多朋友。">我喜欢敲代码,希望认识很多朋友。</textarea> </td> </tr> </tbody> <tfoot> <tr > <td colspan="7" align="center"> <button> 提交个人信息 </button> </td> </tr> </tfoot> </table> </body> </html>