大家好，欢迎来到IT知识分享网。
15、下拉框、文本域、文件域
表单提交的数据都需要通过后台读取分析判断的，所有的表单元素，所有的input标签都需要有name属性用以提交表单时作为键值对中的键传递，不写name属性就没有那个键，没有那个键就上传不了对应的值，后台就是处理这些键值对的请求。
15.1 下拉框
下拉框不是input标签而是用select标签，自带两个属性name和id，name就是列表的名称，提交表单时这个就是键值对中的键，id则是选择区。下拉框的子选项则用option标签表示，option标签中Value就是选项的值，提交表单时传递的就是这个value值。
默认选中就需要在option标签中添加selected属性，复选框、单选按钮同样如此
15.2 文本域
文本域就是多行文本，文本框都是单行的文本，使用textarea标签，name属性也是提交表单时的键，文本域一般会牵涉到行和列，也就是cols属性和rows属性
15.3 文件域
平时见到的上传文件的按钮，文件域是input标签中type为file的标签。name属性也是键
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录注册</title> </head> <body> <h1>注册</h1> <!--表单form action：表示表单要提交到哪个位置，这里不仅仅能够提交到一个网页，还能提交一个请求，可以是网站，也可以是一个请求处理地址 method：post get表示提交方式 get：使用get方式提交表单，会在地址栏中URL显示表单提交的信息，不安全，但是高效 post：比较安全，可以传输大文件，而get方式是不行的 input：输入框，默认值是text，还有其他多种形式 --> <form action="4.链接标签学习.html" method="get"> <!--文本输入框：input type="text" value="提高效率" ：表示初始值 maxlength="8" ：表示最长能写几个字符 size="30"：文本框的长度 --> <p>用户名：<input type="text" name="username" value="提高效率" maxlength="8" size="30"></p> <!-- 密码框--> <p>密码：<input type="password" name="pwd"></p> <!--radio：单选框 radio必须要写value，同时必须要放在同一个组内才能实现单选框的选择，也就是需要添加name属性 input type="radio" value：表示单选框的值，也就是选中之后传递的值 name：表示分组 --> <p>性别： <input type="radio" value="man" name="sex">男 <input type="radio" value="woman" name="sex">女 </p> <!--多选框：checkbox input type="checkbox" name：表示复选框的分组 value：图片上显示的文字 --> <p>爱好： <input type="checkbox" value="sleep" name="hobby">睡觉 <input type="checkbox" value="eat" name="hobby">吃饭 <input type="checkbox" value="fight" name="hobby">打豆豆 </p> <!--按钮： input type="button" 普通按钮 input type="image" 图片按钮 input type="submit" 提交按钮 input type="reset" 重置按钮 普通按钮有button、submit、reset 类型也可以是图片，这里是input标签，不是图片标签，因此这个也可以称为图片按钮 而点击图片是可以提交表单的 value：按钮上面显示的文字 --> <p>按钮： <input type="button" name="btn1" value="点击变长"> <input type="image" src="../resources/image/1.jpg"> </p> <!--下拉框 下拉列表 select：下拉框标签 option：选项值 selected：默认选项 --> <p>下拉列表 <select name="country" > <option value="china" selected>中国</option> <option value="russia" >俄罗斯</option> <option value="US" >美国</option> <option value="UK" >英国</option> </select> </p> <!--文本域 textarea：文本域标签 多行文本 cols：显示多少列 rows：显示多少行 --> <p>文本域：意见反馈 <textarea name="textarea" cols="50" rows="10"></textarea> </p> <!--文件域 input type="file"上传文件 通过name属性上传 --> <p>文件域：文件上传 <input type="file" name="files"> <input type="button" name="upload" value="点击上传"> </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html> 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/130429.html
