表格与表单的实际运用

1.课程表

1.1知识点

运用tr,th,td标签。合并列：rowspan=”3″意思为合并三列；合并行：colspan=”2″意思为合并两行。

1.2运行截图

1.3代码演示

<!DOCTYPE html><htmllang=“zh-CN”><head><metacharset=“UTF-8”><metahttp-equiv=“X-UA-Compatible”content=“IE=edge”><metaname=“viewport”content=“width=device-width, initial-scale=1.0”><title>PHP中文网课程表</title></h小白学搭建点我wcqh.cnead><body><tableborder=“1”width=“600”><caption><h1>PHP中文网课程表</h1></caption><tr><thcolspan=“2”>课程\星期</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期天</th></tr><tr><throwspan=“3”>上午</th><th>第一节</th><td>HTML</td><td>JS</td><td>CSS</td><td>VUE</td><td>PHP</td><throwspa小白学搭建点我wcqh.cnn=“3”colspan=“2”>休息</th></tr><tr><th>第二节</th><td>HTML</td><td>JS</td><td>JS</td><td>PHP</td><td>CSS</td></tr><tr><th>第三节</th><td>CSS</td><td>JS</td><td>PHP</td><td>VUE</td><td>PHP</td></tr><tr><thcolspan=“9”>午休</th></tr><tr><throwspan=“3”>下午</th><th>第四节</th><td>Markdown</td><td>综合实战</td><td>JS</td><小白学搭建点我wcqh.cntd>综合实战</td><td>VUE</td><throwspan=“3”colspan=“2”>休息</th></tr><tr><th>第五节</th><td>Markdown</td><td>PHP</td><td>JS</td><td>VUE</td><td>CSS</td></tr><tr><th>第六节</th><td>综合实战</td><td>Markdown</td><td>VUE</td><td>PHP</td><td>JS</td></tr></table></body></html>

2.注册表单

2.1运行截图

2.2代码演示

<!DOCTYPE html><htmllang=小白学搭建点我wcqh.cn“zh-CN”><head><metacharset=“UTF-8”><metahttp-equiv=“X-UA-Compatible”content=“IE=edge”><metaname=“viewport”content=“width=device-width, initial-scale=1.0”><title>Document</title></head><body><formaction=“register.php”method=“post”><fieldsetstyle=“display:inline–grid; gap:1em;“><legend>用户注册</legend><di小白学搭建点我wcqh.cnvclass=“username”><labelfor=“username”>用户名:</label><inputtype=“text”name=“username”placeholder=“username”id=“username”requiredautofocus></div><divclass=“my-email”><labelfor=“email”>邮箱:</label><inputtype=“email”name=“email”placeholder=“admin@eamil.com”id=“email”></div><divclass=“psw”><labelfor=“passw小白学搭建点我wcqh.cnord”>密码:</label><inputtype=“password”name=“password”placeholder=“******”id=“password”required><buttontype=“button”disabled>显示</button></div><divclass=“age”><labelfor=“age”>年龄:</label><inputtype=“number”name=“age”id=“age”value=“18”max=“50”min=“18”></div><divclass=“birthday”><labelfor=“birth”>出生日期:</l小白学搭建点我wcqh.cnabel><inputtype=“date”name=“birthday”id=“birth”value=“2002-11-02”max=“2005-02-04”min=“1973-02-04”></div><divclass=“color”><labelfor=“color”>喜欢的颜色:</label><inputtype=“color”name=“color”id=“color”></div><divclass=“blog”><labelfor=“blog”>博客地址:</label><inputtype=“url”name=“blog”id=“blog”placeholder=“htt小白学搭建点我wcqh.cnps://qq-xb.cn/”></div><divclass=“upload”><labelfor=“upload”>头像上传:</label><inputtype=“file”name=“upload”id=“upload”><buttontype=“button”>上传</button></div><divclass=“gender”><labelfor=“unknow”>性别:</label><inputtype=“radio”name=“gender”value=“boy”id=“boy”><labelfor=“boy”>男</label><inputtype=“radio”name小白学搭建点我wcqh.cn=“gender”value=“girl”id=“girl”><labelfor=“girl”>女</label><inputtype=“radio”name=“gender”value=“unknow”id=“unknow”checked><labelfor=“unknow”>未知</label></div><divclass=“hobby”><labelfor=“”>兴趣:</label><inputtype=“checkbox”name=“hobby[]”value=“program”id=“program”><labelfor=“program”>编程</label><inputtyp小白学搭建点我wcqh.cne=“checkbox”name=“hobby[]”value=“game”id=“game”><labelfor=“game”>游戏</label></div><divclass=“edu”><labelfor=“”>文化水平:</label><selectname=“edu”id=“edu”><optionvalue=“”disabledselected>请选择</option><optionvalue=“”>本科</option></select></div><button>注册</button></fieldset></form></body></html>

批改老师：

PHPz 批改状态：小白学搭建点我wcqh.cn合格老师批语：完成的很好，没什么问题，继续加油

作者最新博文

html基础入门：html5文档架构与图文解决方案学习

2023-01-16 14:02:33

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END