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> 
<p>密码： 
<input type="password" name="pwd"> 
</p> 
<p>邮箱： 
<input type="email" name="email"> 
</p> 
<p>隐藏： 
<input type="hidden" value="hidden"> 
</p> 
<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> 
<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> 
<p>爱好： 
<input name="hobby" type="checkbox" value="basketball">篮球 
<input name="hobby" type="checkbox" value="football">足球 
<input name="hobby" type="checkbox" value="twoseball">双色球 
</p> 
<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> 
<p>生日：<input name="birthday" type="date"></p> <!--datetime-local--> 
<p> 
<input type="submit" value="提交"> 
</p> 
<p> 
<input type="button" value="button"> 
</p> 
<p> 
<input type="reset" value="reset"> 
</p> 
</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

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

相关推荐

发表回复