07_03简单表单

来源：互联网发布：sqlserver 增加字段编辑：程序博客网时间：2024/06/06 00:45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"><!--默认样式重置--> input {padding: 0;margin: 0;}select {margin: 0;}textarea {padding: 0;margin: 0;}form {width: 700px;height: 650px;border: 1px solid black;}span {border: 2px solid #60F;color: red;}p label {font-weight: bold;color: blue;}.form2 {width: 200px;height: 200px;background: red;}</style></head><body><form action="http://www.baidu.com/" method="get" target="_blank">  <!--form中的一些标签属性分析→input：为浏览器服务（让浏览器知道是什么类型的输入标签）。value：为用户和服务器服务（让用户和服务器知道输入的是什么值）。name：为服务器服务（方便服务器调用和修改value）。id：为label标签的for属性服务（方便for的值关联本标签）； -->   提交按钮：  <input type="submit" value="我要提交" name="" id="submit" />  <br />  重置按钮：  <input type="reset" value="我要重置" name="" id="reset" />  <br />  文本框：  <input type="text" value="写入您的信息" name="" id="user" />  <br />  密码框：  <input type="password"  value="" name="" id="psw" />  <br />  单选框：  <input type="radio" value="man" name="sex" id="man" />  <label for="man">男</label>  <input type="radio" value="woman" name="sex" id="woman" />  <label for="woman">女</label>  <br />  多选框： <br />  <p> 您的兴趣： <br />    <!--checked：默认选中属性。disabled：禁用属性 -->    <input type="checkbox" name="chifan" />    吃饭    <input type="checkbox" name="shuijiao" checked="checked" />    睡觉    <input type="checkbox" name="dadoudou" disabled="disabled" />    打豆豆（禁止用户选择该选项） </p>  <!--该类型不兼容，解决：用flash代替 -->   设置您的头像：  <input type="file"  value="提交头像" name="" />  <br />  <!--后期会用到button按钮 -->  <input type="button" name="" />  <br />  您的配偶情况：  <select name="" id="">    <option value="weihun">未婚</option>    <option value="yihun">已婚</option>    <option value="liyi">离异</option>  </select>  <br />  个人介绍： <br />  <textarea name="" id="" cols="10" rows="5">        </textarea>  <br />  <hr />  <span>快捷入口：</span>   <!--label标签的应用 -->  <p>重新输入用户名→    <label for="user">点我</label>  </p>  <p>重新输入密码→    <label for="psw">点我</label>  </p>  <p>重新输入（性别：男）→    <label for="man">点我</label>  </p>  <p>重新输入（性别：女）→    <label for="woman">点我</label>  </p>  <p>提交→    <label for="submit">点我</label>  </p>  <p>重置→    <label for="reset">点我</label>  </p></form><!--检测form是否有外边距 --><form action="" class="form2">  form2</form></html>
0 0