效果:
<body>
<form action="这里如果为空表单提交后不会有任何操作"
method="get"
<label for="edit">用户名</label>
<input type="text" name="用户名" id="最好不要空,id属性唯一" value=""> <br />
<label for="edit">密 码</label>
<input type="password" > <br />
<label for="hob">性别</label>
<input type="radio" name="性别" value="女" checked/>女
<input type="radio" name="性别" value="男" >男<br />
<label for="hob">爱好</label>
<input type="checkbox" name="爱好" value="写作" >写作
<input type="checkbox" name="爱好" value="听音乐" >听音乐
<input type="checkbox" name="爱好" value="体育">体育<br />
<select name="省份" multiple>
<option >陕西</option>
<option >广西</option>
<option >山西</option>
</select>
<label for="introduction">自我介绍</label>
<textarea name="自我介绍" id="introduction" cols="30" rows="10" ></textarea>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
知识点分析:
所有的name属性都用来定义一个名称,这个名称用于在表单提交时标识数据。
<form>标签用来创建一个表单
action属性用来指定表单数据提交到的服务器端脚本的URL,在实际开发的时候action应该设置具体的URL
method属性决定使用哪种请求方式(get/post),
get
1.在前端的表单中,get上传数据量是受浏览器限制
2.会将表单的所有数据频道url中,所以安全性较差
3.get会在浏览器的历史记录中保存
post
1.数据量无限制
2.post使用requestbody,他是隐蔽的,所以安全性较强
3.post不会讲关键表单信息保存在历史记录中
<textarea>标签的id属性值应该是唯一的,并且与<label>标签的for属性相匹配
<label>:提高表单课访问性,当用户点击标签时,对应的表单控件会获得焦点---for:指定该标签所关联的表单控件的id
<input type给出一个文本框并定义输入控件的类型,value是定义输入控件的初始值
<select >:定义了一个下拉选择框,允许用户从多个选项中选择一个或多个值。---multiple:当这个属性存在时,允许用户从下拉列表中选择多个选项
<option >:定义关联元素中的一个选项。
<input type="submit" value="提交">定义了一个按钮,点击后将表单数据提交到在<form>标签的action属性中指定的URL
<input type="reset" value="重置">将表单中的所有输入控件重置为它们的初始值。