我的前端学习笔记（三）
接上个笔记[aru_41]（表单标签）
本节课所用演示代码点击运行可查看效果-单选框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>上课</title> </head> <body> <H2> 选择你最喜欢的水果 </H2> <form method="get" action=""> 1.苹果<input type="radio" name="fruit" value="apple"> 2.橘子<input type="radio" name="fruit" value="orange"> 3.香蕉<input type="radio" name="fruit" value="banana"> <br> <input type="submit"> </form> </body> </html>
其中表单代码部分单独拿出来
<form method="get" action="地址"> 1.苹果<input type="radio" name="fruit" value="apple"> 2.橘子<input type="radio" name="fruit" value="orange"> 3.香蕉<input type="radio" name="fruit" value="banana"> <input type="submit">
1.3表单组件复选框
要让单选变成多选，将radio替换成checkbox
下面假如你要利用表单标签做一个小项目
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>调查</title> </head> <body> <H2> 您的性别是 </H2> <form method="get" action=""> 男<input type="radio" name="sex" value="male"> 女<input type="radio" name="sex" value="female"> <br> <input type="submit"> </form> </body> </html>
提高用户体验，让它提前默认选中一项，在你想要默认选中的那一项代码后面加checked=”checked”的属性，该属性在多选框同样适用。
如：
男<input type="radio" name="sex" value="male" checked=”checked”>
就是当用户未选择时默认选中项
表单组件-<select>下拉菜单
<select> <option></option> <option></option> <option></option> </select>
<select></select>是下拉菜单组件。中间的option是菜单项，比如常见的选择省份
同样关注两点，数据值，数据名,父子结构直接在上面写便好。
数据值option中间夹的就是值
<select name=”province”> <option>beijing</option> <option>shanghai</option> <option>liaoning</option> </select>
以上就是表单标签最常用的几个组件。
明天更新css
- THE END -
