标签:har color 控件 美食 标签 tar 游戏 sof 内容
创建表单的方法:
用form标签
form标签常用元素:input:单行表单、select:下拉式表单、textarea:多行文本域
input元素的type属性:text:文本属性、checkbox:多选表单、radio:单选表单、password:密码属性、submit:提交表单、reset:重置表单
select必须连用元素:option
lable关联标签:
显示关联:
显式关联是通过label标签的for属性,显式与另一个表单控件关联。需要注意的是,for属性的值必须是与label标签在同一文档中的可标记表单元素的id,注意是id而不是name
隐式关联:
隐式关联是直接将表单控件放到label标签内,这种情况下,label标签只能包含一个表单元素,包含多个只对第一个有效。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单</title> 6 </head> 7 <body> 8 <form action="" method=""> 9 <!-- action:浏览器输入的数据被传送到的地方,比如一个PHP页面(action.php)--> 10 <!-- method:数据传送的方式(get(默认)/post)。--> 11 <input type="text" name="username" value="" placeholder="请输入用户名"/> 12 <br> 13 <input type="text" name="pwd" value="" placeholder="请输入密码"/> 14 <!--type:--> 15 <!--当type为’text‘时,输入框为文本输入框--> 16 <!--当type为’password‘时,输入框为密码输入框--> 17 <!--name:为文本框命名,后期用来给后台程序Java、PHP使用--> 18 <!--value:为文本输入框设置默认值。(一般起到提示作用)--> 19 <!--placeholder:提示用户内容的输入格式--> 20 <br> 21 你的性别是? 22 男<input type="radio" name="sex" value="" checked="checked"> 23 <!-- checked=‘checked’时,该选项被默认选中--> 24 女<input type="radio" name="sex" value="" > 25 <!-- 注意:同一组的单选按钮,name的值一定要一致,比如上面的例子为同一个名称’sex’,这样同一组的单选按钮才可以起到单选的作用。--> 26 <br> 27 你的爱好有? 28 吃美食<input type="checkbox" name="01" value="" checked="checked"> 29 看电视<input type="checkbox" name="02" value="" > 30 玩游戏<input type="checkbox" name="03" value="" > 31 <br> 32 选择你要报名的课程: 33 <select name="course" id=""> 34 <option value="python" selected=‘selected‘>Python中级</option> 35 <option value="go">go 精讲</option> 36 <option value="web">web全栈</option> 37 <option value="Linux">Linux深入挖掘</option> 38 <!-- value=" " :引号里的内容是向服务器提交的值--> 39 <!-- selected=‘selected‘ :默认选中项--> 40 <!-- --> 41 </select> 42 <br> 43 <!-- 显示关联--> 44 <label for="myName">姓名:</label> 45 <input type="text" value="" id="myName" name="myName"> 46 <input type="submit" value="提交"> 47 <input type="reset" value="重置"> 48 <!-- 隐式关联--> 49 <label>性别 50 <input type="text" value="" id="theinput" name="theinput"> 51 </label> 52 <!-- type:只有当type值设置为submit时,按钮才会有提交作用--> 53 <!-- value:按钮上显示的文字--> 54 <!-- label标签标识用户项目中的标题--> 55 <!--它通常关联一个控件,label中的for属性,与某表单控件中的id对应。作为label元素的标签控件。--> 56 <!--另外,当用户单击该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。--> 57 <br> 58 个人说明: 59 <textarea rows="5" cols="40"></textarea> 60 </form> 61 </body> 62 </html>
标签:har color 控件 美食 标签 tar 游戏 sof 内容
原文地址:https://www.cnblogs.com/yx3445/p/12368748.html