HTML表单

表单

常用元素

• form表单
  一般情况下其他表单相关元素都是它的后代元素

• input(大多数表单元素通过input完成，type属性定义表单生成的类型)
  文本框、密码框、单选框，复选框、按钮等元素

  • label(常和input元素一起使用，关联作用）
    表单元素的标题

• textarea(常用来做评论功能) 禁止缩放css中textarea{resize:none;}
  多行文本框

• select、option 下拉选择框

  ​ select常用属性multiple：可以多选 size：显示多少项 name=""
  ​ option常用属性 selected：默认被选中 value=“提交内容”

• fieldset(对表单进行分组，可嵌套多个fieldset对象，legend是它的标题，必须是filedset第一个元素)

  fieldset默认有边框，legend可以用padding撑开

• button按钮

input属性（type类型）

• text：文本输入框（明文输入）

  placholder=“xxx” name=“xxx”

• password：文本输入框（密文输入）

  name=“xxx”

• radio：单选框 checkbox：复选框

  单选/复选必须保持name名字一致，checked默认选中 value是提交的内容

• 按钮

  默认是submit提交

  • type=“button” value=“提交” js绑定事件 (前后端分离)
  • type=“submit” value=“提交” **默认提交给form的action中的URL ** (传统提交)
  • type=“reset”

• file：文件上传

• readonly：只读 disabled：禁用 checked：默认被选中

• name和value(表单提交时这两个很重要)

  表单提交时,name值就是key，value就是提交的值(输入/选中)

  在input中value的作用：输入框中，value就是显示文本，在选择类框中(radio,checkbox,select等)就是提交值

  例如 http://www.test.com/login?uname=xiaxia&upwd=12345

input和label

label元素一般跟input配合使用，用来表示input的标题
labe可以跟某个input绑定，点击label就可以激活对应的input

<label for="username">用户名：</label>
<input type="text" id="username" name="uname">
或者直接用label包着input也可以

input有默认边框和聚焦边框，要去掉input{outline:none;border:0;}

表单提交

• action
  用于提交表单数据的请求URL

• method
  请求方法（get和post），默认是get

• enctype
  规定了在向服务器发送表单数据之前如何对数据进行编码
  取值：
  application/x-www-form-urlencoded：默认的编码方式
  multipart/form-data：文件上传时必须为这个值，并且method必须是post

表单提交两种方式

• 1.传统提交

  *将所有的input包到一个form中，form中action设置url

  *input/button的type类型是submit

  *点击submit自动将所有数据提交到数据服务器

弊端1.会进行页面的跳转（意味着服务器要提前将页面写好，且将写好的页面返给前端，前端直接展示；(服务器渲染)）

​ 2.不方便进行表单数据的验证

• 前后端分离

  *通过js获取所有表单内容，通过正则表达式进行表单验证

  *发送ajax请求，将数据传给服务器，验证成功后，服务器返回结果，需前端解析这个数据，并决定显示什么内容（前端渲染）

get/post请求方式

提交表单数据时，浏览器发送的是http请求，有2种请求方法可以选择
get：在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如
http://ww.test.com/login?phone=123&password=234&sex=1
由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB

post：发给服务器的参数全部放在请求体中
理论上，post传递的数据量没有限制（具体还得看服务器的处理能力）

 <form action="http://www.baidu.com">
        <fieldset>
            <legend>
                必填信息
            </legend>
            <p>
                <label>
                    手机：<input type="text" placeholder="请输入手机号" name="phone">
                </label>
            </p>
            <p>
                <label>
                    密码：<input type="password" name="pwd">
                </label>
            </p>
            <p>
                <label>
                    验证码：<input type="password" name="yzm">
                    <input type="button" value="获取验证码">
                </label>
            </p>
        </fieldset>
        <fieldset>
            <legend>
                选填信息
            </legend>
            <p>
                <label>
                    照片：<input type="file" name="file">
                </label>
            </p>
            <p>
                性别：
                <label>
                    女:<input type="radio" name="sex" checked value="female">
                </label>
                <label>
                    男:<input type="radio" name="sex" value="male">
                </label>
            </p>
            <p>兴趣：
                <label><input type="checkbox" name="hobbi" value="basketball">篮球</label>
                <label><input type="checkbox" name="hobbi" value="playball">足球</label>
            </p>
            <p>
            学历: 
                <select name="edu" id="">
                    <option value="0">小学</option>
                    <option value="1">初中</option>
                    <option value="2">高中</option>
                    <option value="3" selected>大学</option>
                </select>
            </p>
            <p>
                <label>
                    简介：<textarea name="intr" id="" cols="30" rows="5"></textarea>
                </label>
            </p>
        </fieldset>
        <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;<input type="reset">
    </form>