表单

  1. <formaction="http://www.apeclass.com/"><!--表单的东西必须要要放form里面-->
  2. <p>
  3. <inputtype="text"name="userName"value="用户名"/>
  4. </p>
  5. <p>
  6. <inputtype="password"name="passWord"/>
  7. </p>
  8. <p><!--单选-->
  9. <inputtype="radio"name="sex"value="men"/>男
  10. <inputtype="radio"name="sex"value="women"/>女
  11. </p>
  12. <p><!--多选框-->
  13. <inputtype="checkbox"name="interest"value="eat"/>吃饭
  14. <inputtype="checkbox"name="interest"value="sleep"/>睡觉
  15. <inputtype="checkbox"name="interest"value="play"/>打豆豆
  16. </p>
  17. <p>
  18. <inputtype="submit"value="提交按钮"/>
  19. <inputtype="reset"value="重置按钮"/>
  20. </p>
  21. <p>
  22. <inputtype="button"value="自定义按钮"/>
  23. <inputtype="image"src="img/img_01.gif"/>
  24. </p>
  25. <p>
  26. <inputtype="file"name="img"/>
  27. </p>
  28. <p>
  29. <inputtype="hidden"/>
  30. </p>
  31. </form>
2.label
 
  1. <!--
  2. label用来辅助input，点击label后能够让对应的input变成可输入的状态
  3. for属性里放的是对应input的id
  4. -->
  5. <p>
  6. <labelfor="userName">用户名：</label>
  7. <inputtype="text"id="userName"/>
  8. </p>
  9. <p>
  10. <labelfor="pw">密码：</label>
  11. <inputtype="password"id="pw"/>
  12. </p>
 
3.checked
 
  1. <!--
  2. checked 让表单一上来有一个默认选中的状态
  3. -->
  4. <p>
  5. <inputtype="radio"name="sex"value="men"/>男
  6. <inputtype="radio"name="sex"value="women"checked="checked"/>女
  7. </p>
  8. <p>
  9. <inputtype="checkbox"name="interest"value="eat"/>吃饭
  10. <inputtype="checkbox"name="interest"value="sleep"/>睡觉
  11. <inputtype="checkbox"name="interest"value="play"checked="checked"/>打豆豆
  12. </p>
 
 
 
4.readonly和disable
 
 
  1. <!--
  2. disabled 禁止用户输入，并且这个表单不会被提交
  3. readonly 让表单变成只读状态，这个表单会被提交
  4. -->
  5. <formaction="http://www.apeclass.com/">
  6. <p>
  7. <labelfor="userName">用户名：</label>
  8. <inputtype="text"name="userName"value="kaivon"disabled="disabled"/>
  9. </p>
  10. <p>
  11. <labelfor="pw">密码：</label>
  12. <inputtype="password"name="pw"value="123"readonly="readonly"/>
  13. </p>
  14. <p>
  15. <labelfor="number">手机号：</label>
  16. <inputtype="text"name="number"/>
  17. </p>
  18. <inputtype="submit"/>
  19. </form>
 
 
 
 
5下拉框与文本域
 
  1. form{
  2. margin: 0; /*IE6下会有一个margin*/
  3. }
  4. input{
  5. margin: 0;
  6. padding: 0;
  7. outline: none;
  8. }
  9. textarea{
  10. margin: 0;
  11. padding: 0;
  12. resize: both;
  13. overflow: auto;
  14. outline: none;/*点击后，文本框不再有颜色变化*/
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <formaction="http://www.apeclass.com/">
  20. <selectname="area">
  21. <option>北京</option>
  22. <optionselected="selected">上海</option>
  23. <option>广州</option>
  24. </select>
  25. <inputtype="submit"/>
  27. <textareaname="text"id=""style="width:300px; height:300px;"></textarea>
  28. </form>
 
posted @ 2017-01-11 17:27  CafeMing  阅读(251)  评论(0)  编辑  收藏  举报