HTML的form表单标签详解编程语言

前后端有数据交互的时候用form表单

form表单提交数据的几个注意事项:
1. 所有获取用户输入的标签都必须放在form表单里面
2. action控制着往哪儿提交
3. input/select/textarea 都需要有name属性
4. 必须要有提交按钮 input type= submit

 !DOCTYPE html 

 html lang="en" 

 head 

 meta charset="UTF-8" 

 title form表单示例 /title 

 /head 

 body 

 form action="/upload/" method="post" enctype="multipart/form-data" 

 p 用户名: 

 input type="text" name="username" readonly value="小强" !--只读，默认值是小强-- 

 input type="text" name="username" value="小强" !--默认值是小强-- 

 input type="text" name="username" placeholder="小强" !--预值是小强-- 

 p 密码： 

 input type="password" name="pwd" 

 p 邮箱： 

 input type="email" name="email" 

 p 隐藏： 

 input type="hidden" value="hidden" 

 p 性别: 

 input name=gender type="radio" value="1" man 

 input name=gender type="radio" value="0" woman 

 input checked name=gender type="radio" value="2" 保密（默认选中） 

 p 性别2: 

 label for="r1" man /label 

 input id="r1" name=gender type="radio" value="1" 

 label 男 

 input name="gender" type="radio" value="1" 

 /label 

 label for="r2" woman /label 

 input id="r2" name=gender type="radio" value="0" 

 label for="r3" 保密（默认选中） /label 

 input id="r3" checked name=gender type="radio" value="2" 

 p 爱好： 

 input name="hobby" type="checkbox" value="basketball" 篮球 

 input name="hobby" type="checkbox" value="football" 足球 

 input name="hobby" type="checkbox" value="twoseball" 双色球 

 select name="from" id="s1" 

 option value="bj" 北京 /option 

 option value="sh" selected 上海 /option !--默认选中-- 

 option value="sc" 四川 /option 

 /select 

 select name="from1" id="s11" multiple !--多选-- 

 option value="bj" 北京 /option 

 option value="sh" 上海 /option 

 option value="sc" 四川 /option 

 /select 

 select name="from2" id="s2" 

 optgroup label="北京" 

 option value="cp" 昌平 /option 

 option value="cy" 朝阳 /option 

 option value="hd" 海淀 /option 

 option value="ft" 丰台 /option 

 /optgroup 

 optgroup label="上海" 

 option value="pdxq" 浦东新区 /option 

 option value="mhq" 闵行区 /option 

 option value="hpq" 黄浦区 /option 

 /optgroup 

 optgroup label="四川" 

 option value="pzh" 攀枝花 /option 

 option value="zg" 自贡 /option 

 option value="my" 绵阳 /option 

 /optgroup 

 /select 

 p 大文本: 

 textarea name="info" id="t1" cols="30" rows="10" 

 /textarea /p 

 p 头像： 

 input name="lp" type="file" 

 p 生日： input name="birthday" type="date" /p !--datetime-local-- 

 input type="submit" value="提交" 

 input type="button" value="button" 

 input type="reset" value="reset" 

 /form 

 /body 

 /html 

小总结:
input系列:
text
value 设置默认值
placeholder 设置占位内容
password

radio 单选框
checkbox 多选框

date 日期
datetime 时间

file 文件

button 普通按钮,多用JS给它绑定事件
reset 重置
submit 提交

埋下伏笔:什么时候用 input type= hidden

textarea 大段文本

select 下拉菜单

option 具体的下拉选项

optgroup 分组的下拉框
-label= 上海

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/18155.html