表单 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6     </head>
  7     
  8     <script type="text/javascript">
  9      </script>
 10      <style type="text/css">
 11     
 12     </style>
 13     
 14     <body>
 15         <!--
 16         表单的作用就是用来将用户信息提交给服务器的
 17         比如 百度的搜索框 登入 注册
 18         -->
 19         
 20         <!-- 
 21          使用form标签创建一个表单 
 22          form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
 23          当我们提交表单时会提交到action属性对应的地址
 24          -->
 25     <form action="www.baidu.com.cn">
 26         <!--
 27         使用input(是自结束)来创建一个文本框，它的type属性是text 是内联元素
 28         如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
 29         name表示提交内容的名字
 30         
 31         用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
 32         url地址?查询字符串
 33         格式 属性名=属性值
 34     
 35         
 36         提交按钮可以将表单中的信息提交给服务器
 37         使用input创建一个提交按钮，它的type属性是submit
 38         在提交按钮中可以通过value属性来指定按钮上的文字
 39         -->
 40         <!--
 41         在表单中可以使用fieldset来为表单项进行分组
 42         可以将表单项中的同一组放到一个fieldset
 43         在fieldset可以使用legend子标签，来指定组名
 44         -->
 45         <fieldset>
 46             <legend>用户信息</legend>
 47         <label for="11">用户名</label>
 48         <input id="11" type="text" name="username" />
 49         <input type="submit" value="button" />
 50         <!--
 51         密码框
 52         使用input创建一个密码框，它的type属性值是password
 53         
 54         单选按钮
 55         使用input来创建一个单选按钮，它的type属性使用radio
 56         单选按钮通过name属性进行分组，name属性相同是一组按钮
 57         像这种需要用户选择但是不需要用户直接填写内容的表单项
 58           还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
 59         
 60         如果希望在单选按钮或是多选项中指定默认选中的选项
 61           则可以在希望项中的添加checked="checked"属性
 62         -->
 63         <label for="um">密码</label>
 64         <input id="um" type="password" /><br /><br/>
 65         性别<input type="radio" name="gender" value="male"/>男
 66         <input type="radio" name="gender"value="female" checked="checked" />女<br/><br/>
 67         爱好<input type="checkbox" name="hobby" value="football" checked="checked"/>足球
 68         <input type="checkbox" name="hobby" value="basketball"/>篮球
 69         <br/><br/>
 70         <!--
 71         下拉列表
 72         使用select来创建一个下拉列表
 73         下列列表的name属性需要指定给select，而value属性需要指定给option
 74         通过在option中添加selected="selected"来将选择项设置为默认值中
 75         为select添加一个multiple="multiple",则下列列表变为一个多选的下拉列表
 76         -->
 77         </fieldset>
 78         <fieldset>
 79         <legend>爱好</legend>
 80         你喜欢的明星
 81         <select name="star" >
 82             <!--
 83             在下列列表中使用option标签来创建一个一个列表项
 84             
 85             在select中可以使用optgroup对选项进行分组
 86             而一个optgroup中的选项是一组
 87             -->
 88             <optgroup label="女明星">
 89             <option value="a" selected="selected">vv</option>
 90             <option value="b">赵丽颖</option>
 91             <option value="c">郭碧婷</option>
 92             </optgroup>
 93             <optgroup label="男明星">
 94                 <option value="1" selected="selected">李荣浩</option>
 95                 <option value="2">周杰伦</option>
 96             </optgroup>
 97         </select>
 98         <!-- 
 99         使用textarea创建一个文本域
100         -->
101         自我结束<textarea name="info">
102             </textarea>
103         <br/><br/>
104         <input type="submit" value="注册"/>
105         <!--
106         使用input type=button可以用来创建一个单纯的按钮
107         除了使用input，也可以使用button标签来创建按钮，使用起来更加灵活
108          
109         使用<input type="reset" />可以创建一个重置按钮，
110         点击重置按钮以后表单中的内容会恢复默认值
111         
112         在HTML中提供了一个专门用来选中表单中提示文字的label标签
113         该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
114         -->
115         <input type="button" value="按钮">
116         <button type="submit">按钮</button>
117         <input type="reset" />
118         </fieldset>
119     </form>
120     </body>
121 </html>

 

posted @ 2019-07-23 20:22  zuiaimiusi  阅读(198)  评论(0)    收藏  举报