HTML_表单

---

1.表单属性

name：表单的名称
method：表单的提交的方式，默认是get，取值post
action：提交的地址
radio：单选按钮
checkbox：多选框
value：当前值
checked：默认选中
disabled：不可用，禁用
readonly：只读，禁用
placeholder：提示
file：选择文件

get和post区别：
1.get提交的数据不安全，会在地址栏显示，post最安全
2.get提交的数据大小有限制（不能大于2kb，大约1千个中文字），post理论上没有限制

<form action="" name="" method=""></form>

2.表单元素

用户名：
性别：男 女
爱好：看书 游泳 唱歌

<form action="./另外一个网页.html" name="form1" method="post"> 
    用户名：<input type="text" name="username"><br>
    性别：<input type="radio" name=”sex“>男 
             <input type="radio" name=”sex“>女<br>
    爱好：<input type="checkbox" name=”hobby“>看书
             <input type="checkbox" name=”hobby“>游泳
             <input type="checkbox" name=”hobby“>唱歌<br>
             <input type="submit" value=“登录”>
             <input type="reset" value=“重置”>
             <input type="button" value=“没有任何功能”>
</form>

3.表单嵌套表格

                                                                                                                                                               

姓名：
密码：

     

    <form action="http：//www.baidu.com" method="post"> 
        <table border="1" cellspacing="0" width="600">
             <tr align="center">
                <td> 姓名：</td>
                <td><input type="text"></td>
             </tr>
            <tr align="center">
                <td> 密码：</td>
                <td><input type="password"></td>
            </tr>
        </table>
    </form>

4.下拉列表

北京 天津 上海

 <select>
            <option value="0">北京
            <option value="1">天津
            <option value="2" selected>上海
 </select>

5.多行文本框

我是一个文本框

 <textarea rows="10" cols="30">
            我是一个文本框
  </textarea>

6.标签label

性别             男             女

label：提升用户体现度
 
    <p>性别
        <input type="radio" name="sex" id="man">
        <label for="man">男</label>
        <input type="radio" name="sex" id="woman">
        <label for="woman">女</label>
    </P>

hidden：隐藏域不给用户看的）

占位符，已隐藏

<p> 占位符，已隐藏
  <input type="hidden" name="country" value="Norway">
</p> 

      提交
      重置
      没有功能的按钮
 

<p>
     <button>提交</button>
     <button type="reset">重置</button>
     <button type="button">没有功能的按钮</button> 
</p>