INPUT系列:
先来个简单的单选框,适应下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <div> <p>请选择性别</p> 男:<input type="radio" name="sex" value="1"/> 女:<input type="radio" name="sex" value="2"/> 不知道:<input type="radio" name="sex" value="3"/> <!--这里是新的一个选项,radio 三个的name一样就互斥了 value你虽然看不见,但是它嵌入选项里面--> </div> <input type="submit" value="提交"/> </form> </body> </html>
注意的URL的变化,选择男之后,这里会出现sex=1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <input type="text" name="users"/> <p>请选择性别</p> 男:<input type="radio" name="sex" value="1" checked="checked"/> <!-- 这里最后面加上的是默认选择--> 女:<input type="radio" name="sex" value="2"/> <p>爱好</p> 篮球:<input type="checkbox" name="hobby" value="1" checked="checked"/> 足球:<input type="checkbox" name="hobby" value="2"/> 学习:<input type="checkbox" name="hobby" value="3" checked="checked"/> 翘课:<input type="checkbox" name="hobby" value="4"/> <p>技能</p> 撩妹:<input type="checkbox" name="skill" value="1" checked="checked"/> 王者:<input type="checkbox" name="skill" value="2"/> <p>上传文件</p> <input type="file" name="filename"/> <!--注意,上传文件必须给表单加一个新的属性,见上--> </div> <input type="submit" value="提交"/> <input type="reset" value="重置"/> <!--这里点击它就能重置非默认的选项--> </form> </body> </html>