form表单用于收集填写的信息,提交后台,表单的元素用form包括所有的元素,形成完整的数据。
form表单常见标签的使用注意事项:
- 一般常用的标签有form、name、lable、text、button、input、textarea、checkbox、radio、select、password、placeholder、file、hidden。
其中form作为表单的开始和结束标签
name值为什么,传递的就是什么,必须得有,才能传递数值后台
lable一般用于解释性语句,输入框旁边的内容,做提示用
placeholder提示用
text一般是单行文本内容<input type="text">
textarea是多行文本,标签需要闭合<textarea>...</textarea>
checkbox复选框,可多选<input type="checkbox">
select下拉菜单,标签需要闭合,与option搭配使用<select><option>...</option></select>
file上传文件<input type="file">
hidden为了安全性<input type="hidden">
如:
<form action="" method="post">
<div>
<lable>姓名:</lable>
<input type="text" name="username" value="" placeholder="用户名">
</div>
<div>
<lable>密码:</lable>
<input type="password" name="password" value="123456" >
</div>
<div>
<lable>性别:</lable>
<input type="radio" name="sex" value="men" checked="cehcked">男
<input type="radio" name="sex" value="women">女
</div>
<div>
<lable>我的爱好:</lable>
<input type="checkbox" name="myhobby" value="dota">dota
<input type="checkbox" name="myhobby" value="trvale" checked="cehcked">旅游
<input type="checkbox" name="myhobby" value="pet" checked="cehcked">宠物
</div>
<div>
<lable>评论:</lable>
<textarea name="commnet" cols="60" rows="10">
</textarea>
</div>
<div>
<lable>我梦想的car:</lable>
<select>
<option>兰博基尼</option>
<option>玛莎拉蒂</option>
</select>
</div>
<div>
<input type="hidden" name="123456" value="阿拉丁神灯">
</div>
<div>
<input type="file" accept="image/png">
</div>
<div>
<button>普通按钮</button>
<input type="button" name="button" value="提交">
<input type="button" name="reset" value="重置">
</div>
</form>
form表单的简单应用