关于HTML的知识点（form）

HTML的知识点

• form：表单

1. form常用属性：
   method：表单的提交方式（post和get）
   action：表单处理服务器
   
2. 注意：
   凡是用户与服务器交互的表单标签应全部放在form标签内
   form内的提交按钮提交的是整个form表单
3. post方法：
   如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器
   在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数
4. get方法：
   如果采用 GET 方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔
5. 一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method （方法）属性中指明表单处理服务器要用方法来处理数据，使 POST 还是 GET

• input：表单元素

1. input常用属性：
   name：类似前端的id，同时前端可以用来js取值和分类
   type：input的种类
   value：input的值
   placeholder（输入类）：文本输入提示（css3新增属性，用来提示文本输入）
   checked（选择类）：页面加载时默认选定的 input 元素
   disabled/readonly：规定禁用/只读的 input 元素
2. input的专用伪类选择器：:focus---获得焦点
3. input的按钮类元素在鼠标移入时不会显示为可以点击的手型，可以用cursor的样式改变其效果，cursor也可以用在其他元素上
4. type的类型：
   • 输入类：text——文本框；password——密码
   • 选择类：radio——单选；checkbox——复选
   • 按钮类：submit/image——提交/图片提交；reset——重置；button——按钮
   • 特殊类：file——上传

label标签：绑定input元素定义标注，并帮助input元素获取焦点

1. 写法1：两个标签分开写，label的for属性的值等于input的id值
2. 写法2：label嵌套成input的父元素

DOM中文档结构如下：

<form method="get" action="https://www.baidu.com">
    <input type="text" name="Text" placeholder="请输入用户名"/><br/>
    <input type="password" placeholder="请输入密码"/><br/>
    <input type="file" value="上传"/><br/>
    <input type="button" value="按钮"/><br/>
    <input type="text" readonly="readonly" value="我是只读的"/><br/>
    <input type="text" disabled="disabled" value="我是禁用的"/><br/>
    <input type="image" value="提交图片"/><br/>
    <input type="submit" value="提交" class="cursor"/><br/>
    <input type="reset" value="重置"/><br/>
    单选框：<br/>
    <input type="radio" id="rad1"/><label for="rad1">同意</label><br/>
    多选框：<br/>
    <label><input type="checkbox" name="xq"/>苹果</label>
    <label><input type="checkbox" name="xq"/>香蕉</label>
    <label><input type="checkbox" name="xq"/>菠萝</label>
</form>

CSS中的样式如下：

input:focus{border:1px red solid;}
.cursor:hover{cursor:pointer;}

效果图如下：

• 其他表单元素

1. select/option：下拉选框/下拉选框的选项
   对高度的支持不兼容
   size（select属性）：用来设置同时显示选项的数量
   selected（option属性）：用来设置下拉框的默认选项

DOM中文档结构如下：

下拉列表：<select id="sel1">
             <option value="北京">北京</option>
             <option selected="selected" value="上海">上海</option>
             <option value="西安">西安</option>
         </select>

效果图如下：

1. textarea：文本域
   各个浏览器下的默认滚动条显示不兼容
   css3新增 resize 调整尺寸属性 resize: none;
   cols/rows属性：列数/行数

DOM中文档结构如下：

文本域：<textarea style="resize:none;" cols="5" rows="5">我是value</textarea>

效果图如下：