制作一个表单
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>7月26日作业</title> <style> thead { background-color: #dedede; } tfoot { font-size: 20px; } </style> </head> <body> <caption> 方案报价单 </caption> <table border="1" cellspacing="0" cellpadding="5" width="500"> <colgroup> <col /> <col /> <col /> <col /> <col style="background-color: cadetblue;" /> </colgroup> <thead> <tr> <td>品名</td> <td>单位</td> <td>单价</td> <td>数量</td> <td>金额</td> </tr> </thead> <tbody> <tr> <td>收款机</td> <td rowspan="2">台</td> <td>3800</td> <td>1</td> <td>3800</td> </tr> <tr> <td>条码机</td> <!-- <td>台</td> --> <td>1500</td> <td>2</td> <td>3000</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">合计:</td> <!-- <td></td> --> <!-- <td></td> --> <!-- <td></td> --> <td>7000</td> </tr> </tfoot> </table> </body></html>
- 运行效果
表单控件练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单操作</title></head><body> <h2>用户注册</h2> <hr /> <form action=""> <fieldset style="width: 400px;"> <legend>基础信息</legend> <label for="username">用户姓名:</label> <!-- placeholder 文本框内提示 required 必填项 autofocus 默认焦点,这三个单词重要,需要多敲 --> <!-- required 和autofocus默认是true不输入是false --> <input id="username" type="text" name="username" value="" placeholder="只能输入汉字" required autofocus /> <div> <!-- 只有标签 中for绑定输入框的id时,点标签才定位光标 --> <label for="pwd">输入密码:</label> <input type="password" id="pwd" name="pwd" value="" required /> </div> <div> <label for="xb">性别:</label> <input type="radio" name="xb" value="" id="n" checked /><label for="n" >男</label > <input type="radio" name="xb" value="" id="v" /><label for="v" >女</label > <div> <label for="xl">学历:</label> <select name="xl" id="xl"> <option value="cz">初中</option> <option value="">高中</option> <option value="">大学</option> </select> </div> </div> </fieldset> <fieldset style="width: 400px;"> <legend>联系方式</legend> <div> <!-- required此属性只要有就是true表示必填项 --> <label for="telid">手机号:</label> <input type="text" id="telid" value="" name="tel" placeholder="请输入11位手机号" required /> </div> <div> <label for="qqid">QQ号:</label> <input type="text" id="qqid" value="" name="qq" placeholder="请输入QQ号码" /> </div> <div> <label for="email">邮 箱:</label> <input type="email" id="email" value="" name="" placeholder="XXXX@XXX.com" /> </div> </fieldset> <fieldset style="width: 400px;"> <legend>个人情况</legend> <div> <label for="">爱好:</label> <!-- checked有就是true,所以给一个默认值,默认选中此项 --> <input type="checkbox" id="yd" name="ah_name" checked /><label for="yd" >运动</label > <input type="checkbox" id="ly" name="ah_name" /><label for="ly" >旅游</label > <input type="checkbox" id="yy" name="ah_name" /><label for="yy" >音乐</label > <input type="checkbox" id="tw" name="ah_name" /><label for="tw" >跳舞</label > </div> <div> <label for="nl">年龄</label> <input type="number" setp="1" max="100" min="18" /> </div> <div> <label for="">婚姻状况:</label> <input type="radio" id="wh" name="hyzk" checked /><label for="wh" >未婚</label > <input type="radio" id="yh" name="hyzk" /><label for="yh">已婚</label> </div> <div> <label for="shz">上传生活照</label> <input type="file" id="shz" /> <!-- 通过隐藏域控制了上传文件的大小为1k,以减少服务器负担 --> <input type="hidden" name="MAX_FILE_SIZE" value="1024" /> </div> <label for="rsxt">人生信条</label> <!-- 这里datalist标签也是双标签,在VSCODE中识别效果不好,注意Input中特殊属性list可以绑定datalist中的id 实现下拉列表效果 --> <input type="text" id="rsxt" list="my_list" /> <datalist id="my_list"> <option value="爱拼才会赢">爱拼才会赢</option> <option value="好好学习天天向上">好好学习天天向上</option> <option value="我命由我不由天">我命由我不由天</option> </datalist> <div> <label for="gzjl">工作经历</label> <textarea name="" id="" cols="30" rows="10"></textarea> </div> <div> <label for="sf">所在省份</label> <select name="sf" id="sf"> <option value="河南省" selected>河南省</option> <option value="山东省">山东省</option> <option value="安徽省">安徽省</option> </select> <label for="sr">生日</label> <input type="date" id="sr" name="grsr" /> </div> <div> <label for="mycolor">喜欢的颜色</label> <input type="color" id="mycolor" /> </div> </fieldset> <button>提交</button> </form></body></html>
运行效果
