首页 > 编程知识 正文

html表单制作教程,html制作表格代码

时间:2023-05-03 18:22:37 阅读:116991 作者:567

一、知识点1、表单作用:验证信息采集数据在线考试问卷2、表单配置提示文本:提示用户如何操作(一般通过placeholder属性进行)表单字段)相当于一个容器一些表单控件表单控件)的具体功能项目(按钮、下拉列表、输入框等) 3,表单域form action='

表单内容

/form

4、窗体控件(1) input :输入框。 它们都具有value属性,用户可以通过输入信息将value属性的值发送并保存到远程服务器。

单行文本框: input type=' text ' id=' ' value=' ' placeholder='提示信息'密码框: input type=' password ' placeholder 提示信息'数字输入框ut type='date '颜色输入框: input type='color '文件选择框: input type='file '单选按钮: input type=' radio 不能同时选择相同的name值的选项(检查按钮: input type='checkbox' value='按钮上显示的内容(id=' ' ) )此处的value指示和按钮上显示的文本内容) (复位按钮)输入类型=' reset ' value='按钮显示的内容()必须放在form/form中有效的普通按钮)输入类型=' button ' value=

选择

选项值='值1 '选项1 /选项

选项值='值2 '选项2 /选项

选项值='值3 '选项3 /选项

/select

)3) textarea :文本框(多行文本框,用户可以调节缩放) )。

textarea rows='行数' cols='列数' /

二、表格制作代码: body font color=' red ' face=' ' size='5' p style=' text-align 3360 center;' 用户登记表/p /*标题*//fonthrcolor=' black ' width=' 1000 ' size='2'/*水平分割线*/form action=' # ' method=' GGE 创建要设置为的表单的idth=' 500 ' input type=' text ' placeholder='用户名'/td td font color='red' size='1'用户名的长度为4-1110

<label>密&nbsp;&nbsp;&nbsp;码:</label> </td> <td style="text-align: left;"> <input type="password" placeholder="请输入密码"> </td> <td> <font color="red" size="1">密码长度为6个字符</font> </td> </tr> <tr> <td style="text-align: center;" width="400"> <label>确认密码:</label> </td> <td style="text-align: left;"> <input type="password" placeholder="请确认密码"> </td> <td> <font color="red" size="1">重复密码</font> </td> </tr> <tr> <td> <label>性别:</label> </td> <td style="text-align: left;"> <input type="radio" name="sex" id="r1" value="1" checked> /*单选按钮*/ <label for="r1">男</label> <input type="radio" name="sex" id="r2" value="0"> <label for="r2">女</label> </td> </tr> <tr> <td> <label> 出生日期:</label> </td> <td style="text-align: left;"> <input type="date"> </td> </tr> <tr> <td> <label>爱好:</label> </td> <td style="text-align: left;"> <input type="checkbox" value="体育" id="ch1"> /*复选按钮*/ <label for="ch1">游泳</label> <input type="checkbox" value="旅游" id="ch2"> <label for="ch2">旅游</label> <input type="checkbox" value="音乐" id="ch3"> <label for="ch3">音乐</label> <br><br> <input type="checkbox" value="影视" id="ch4"> <label for="ch4">影视</label> <input type="checkbox" value="追星" id="ch5"> <label for="ch5">追星</label> <input type="checkbox" value="写作" id="ch6"> <label for="ch6">写作</label> </td> <td> <font color="red" size="1">至少选择三项</font> </td> </tr> <tr> <td> <label>个人介绍:</label> </td> <td style="text-align: left;"> <textarea cols="20" rows="5"></textarea> </td> </tr> <tr> <td> <label>验证码:</label> </td> <td style="text-align: left;"> <input type="number" placeholder="请输入验证码"> <label>791216</label> </td> <td> <font color="red" size="1">请输入验证码</font> </td> </tr> <tr rowspan="3" style="text-align: right;"> <td > <input type="file"> </td> </tr> </table> <hr color="black" width="1000" size="2"> <table> <tr rowspan="3" style="text-align: right;"> /*此处rowspan是使单元格跨行*/ <td width="1100"> <input type="submit" value="确认"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value="重置"> </td> </tr> </table> </form></body> 表单制作结果:

这是最基础的表单制作,较为简单。可以根据情况对表单进行背景图片或颜色以及图片的添加,并将表单完善。

三、总结

此处的表单制作用到了很多HTML的表单控件,同时需要将这些控件与前面学习的其他文本控件联系起来使用才能使表单更加全面完善。

 

 

 

 

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。