html+css学习day3（输入框、密码框、复选框、单选框、上传文件、提交和重置按钮、多行文本框、下拉菜单）

1、表单标签（和表格标签的区别是没有太多规范要求）

form、input

intput（单标签）标签有一个type属性，决定是什么控件

<form>

   第一个属性：输入

<h2>输入框：</h2>

      <input type="text"  placeholder=“请输入用户名”>placeholder是在输入框里面的文字

第二个属性：密码

      <h2>密码框：</h2>

      <input type="password" >这样输出来的密码是隐藏的

第三个属性：复选框

<h2>复选框：</h2>

      <input type="checkbox"   checked  就是默认被选上了>苹果

       <input type="checkbox">香蕉

          <input type="checkbox"     disabled  就是不能选>葡萄

第四个属性：单选

<h2>单选框：</h2>

      <input type=radio" name=“gender或者随便什么”>男

        <input type=radio" name=“ 必须和上面的name一样，被认为是一组这样就是单选框，只能选一个”>男

 

第五个属性 file属性（上传文件）

<h2>上传文件</h2>

<input type="file">

第六个属性提交和重置 

<h2>提交按钮和重置按钮</h2>

<input type="submit">

<input type="reset">

提交按钮后，要跳转到另一个页面，因此在第一行的form里面要加上跳转地址

<form action="http://............">但是真正的能跳转还得学习其他的

</form>

2、表单相关标签

多行文本框 textarea

<textarea cols=""  行  rows="" 列 ></textarea>

下拉菜单select、option

<select>

          <option>北京</option>

          <option>上海</option>     

           <option>杭州</option>

</select>

如果想让最开始显示的默认值是上海

那么在 <option selected >上海</option>  加入selevted

如果想让最开始默认的是请选择并且不能选择请选择这一选项则在<select>标签里面加上

<option selected disabled>请选择</option>

多选文件可以加上multiple  <input type="file" multiple>

辅助表单label

可以扩大你的点击范围（提升用户体验）

<input type="radio" name="gender" id="man"><label for="man">男</label>

<input type="radio" name="gender" id="woman"><label for="woman">女</label>

3、表单表格的组合使用

  <form  action="">跳转地址

       <table border="1" cellpadding="30">

              <tBody>

                           <tr align="center">

                                   <td rowspan="4">总体信息</td>

                                    <td colspan="2">用户注册</td>

                          </tr>

                           <tr align="right">

                                    <td>用户名:</td>

                                     <td ><input type="text" placeholder="请输入用户名"><td>   

                           </tr>    

                            <tr align="right"> 

                                    <td>密码:</td>

                                     <td ><input type="password" placeholder="请输入密码"><td>   

                            </tr> 

                          <td colspan="2" align="center">

                                          <input type="submit">&nbsp&nbsp&nbsp&nbsp&nbsp

                                          <input type="reset">

                           </td>