表单及控件

1、常用属性

action，指定提交的地址
method，指定提交的方式，一般为get或post

get方式请求：1、直接输入地址访问。2、表单没有设置method时或设的为get，都是get方式的请求。get方式请求会将请求参数的名和值转换为字符串，拼接在原地址的url后面，如，http://localhost/cheny?name=cheny&sex=1，在地址栏会看到参数的名和值。get的传输一般不能大于2KB

post方式请求，提交表单时经常使用，需要将method设置为post。传输量大，一般认为是不受限制的，但往往取决于服务器的限制。post请求的参数的名和值放在html header里传输，用户看不到，相对安全。

enctype，指定表单内容进行编码使用的字符集，有三个值

application/x-www-form-urlencoded，这是默认的编码方式，只处理表单控件的value属性值，它会将值处理成url的编码方式

multipart/form-data，这种方式会议二进制流的方式处理表单数据，会把提交的文件也封装到请求参数里，上传文件时就设为这个

text/plain，当表单的action值设为mailto:URL的形式时，用这个比较方便，这个方式使用于表单直接发邮件

target，与超链接的target一样，指定提交后在当前页打开，还是另外开个窗口

注意：
1、应该为表单控件都设置一个name，没有name的话，表单不会生成这个控件的参数
2、如果多个控件有相同的name，则多个表单控件只生成一个参数，只是该参数有多个值
在这里插入图片描述
3、name是参数名，value指定提交的值
4、如果表单有个控件设置了disabled，则不会再对该控件生成请求参数
5、input设置为image时，点击这个图片也会导致表单的提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="test.html" method="get" target="_blank">
    单行文本框：<input type="text" id="username" name="username"> <br>
    不能编辑的文本框：<input type="text" id="username2" name="username" readonly="readonly"> <br>
    密码框：<input type="password" name="password"> <br>
    隐藏域：<input type="hidden" name="hidden" value="emm"> <br>
    第一组单选框：<br>
    红：<input type="radio" name="color" value="red">
    绿：<input type="radio" name="color" value="green">
    蓝：<input type="radio" name="color" value="blue"> <br>
    第二组单选框： <br>
    男性：<input type="radio" name="gender" value="male">
    女性：<input type="radio" name="gender" value="female"> <br>
    两个复选框： <br>
    <input type="checkbox" name="hobby" value="basketball">篮球
    <input type="checkbox" name="hobby" value="badminton">羽毛球 <br>
    文件上传域：<input type="file" name="file"> <br>
    图像域：<input type="image" src="images/pic02.jpeg" alt="conan" width="100" height="50"> <br>
    下面是四个按钮：<br>
    <input type="submit" name="ok" value="提交">
    <input type="submit" name="dis" value="提交" disabled="disabled">
    <input type="reset" name="cancel" value="重填" >
    <input type="button" name="no" value="无动作的按钮">
</form>
</body>
</html>

2、button与input type=button的区别

button元素定义的是一个按钮，里面可以包含普通文本、格式化的标签、图像等等。button标签里面所有的内容都是这个button的内容。

    <button type="button"><b>提交</b></button>
   <!--图片提交按钮-->
    <button type="submit"><img src="images/pic02.jpeg" width="30" height="30" alt=""></button>

在这里插入图片描述

3、select与option元素

<form action="test.html" method="post" target="_blank">
    下面是简单的下拉菜单：<br>
    <select name="skills" id="skills">
        <option value="java">java语言</option>
        <option value="c++">c++语言</option>
        <option value="c++c">c语言</option>
    </select>
    <br><br><br>
    下面是允许多选的列表框：<br>
    <select name="books" id="books" multiple="multiple" size="4">
        <option value="book1">书1</option>
        <option value="book2">书2</option>
        <option value="book3">书3</option>
        <option value="book4">书4</option>
    </select>
    <br><br><br>
    下面是允许多选的列表框：<br>
    <select name="book-group" id="book-group" multiple="multiple" size="6">
        <optgroup label="分类1">
            <option value="book1">书1</option>
            <option value="book2">书2</option>
            <option value="book3">书3</option>
            <option value="book4">书4</option>
        </optgroup>
        <optgroup label="分类2">
            <option value="book5">书5</option>
            <option value="book6">书6</option>
            <option value="book7">书7</option>
            <option value="book8">书8</option>
        </optgroup>
    </select>
    <br>
    <button type="submit"><b>提交</b></button>
</form>

4、增强的textarea

<form action="test.html" method="post" target="_blank">
    简单的多行文本域：<br>
    <textarea name="txt1" id="txt1" cols="30" rows="10"></textarea> <br>
    只读的多行文本域：<br>
    <textarea name="txt2" id="txt2" cols="10" rows="5" readonly>    哈哈哈，嘻嘻
    </textarea> <br>
    <button type="submit"><b>提交</b></button>
    <br>
</form>

注意：如果添加wrap=“hard”时，在提交文本时，会在文本换行的地方添加换行符

5、fieldset与legend

这个会将表单分组
在这里插入图片描述

6、h5新增的属性

1、form，表单可以定义在form标签的外部，只需在外面的标签加个form属性，让它的值等于表单的id，就能一起提交过去，更加灵活了。
2、formaction，当一个form表单里有两个提交按钮时，对其分别设个formaction属性，可以控制两个按钮提交不同的页面，这样也更灵活了，比如，一个提交到登录，一个提交到注册。
3、formenctype，formmethod，formtarget，顾名思义，可以设置按钮不同的提交方式
4、autofocus，设置这个属性，浏览器打开时这个控件会自动获取焦点，但是只能有一个控件设置这个属性
5、placeholedr，显示用户的提示信息，点一下就消失了，很人性化。
6、list，这个挺有意思，你点击搜索框，会出一些提示的信息在下面，相当于隐藏的下拉菜单
在这里插入图片描述

7、autocomplete，可以设为on或off，设置表单是否支持自动完成功能，会根据上次提交的数据生成列表框让用户选，有种智能提示的感觉，如果是off，则不生成。

扫描二维码关注公众号，回复： 4056667 查看本文章

7、h5新增的表单元素

<form action="test.html" method="post" target="_blank">
    type="color"的文本框：<br>
    <input type="color" name="color"> <br>
    type="date"的文本框：<br>
    <input type="date" name="date"> <br>
    type="time"的文本框：<br>
    <input type="time" name="time"> <br>
    type="datetime-local"的文本框：<br>
    <input type="datetime-local" name="datetime-local"> <br>
    type="month"的文本框：<br>
    <input type="month" name="month"> <br>
    type="week"的文本框：<br>
    <input type="week" name="week"> <br>
    type="email"的文本框：<br>
    <input type="email" name="email"> <br>
    type="tel"的文本框：<br>
    <input type="tel" name="tel"> <br>
    type="url"的文本框：<br>
    <input type="url" name="url"> <br>
    type="number"的文本框：<br>
    <input type="number" name="number"> <br>
    type="range"的文本框：<br>
    <input type="range" name="range"> <br>
    type="search"的文本框：<br>
    <input type="search" name="search"> <br>
    <input type="submit" value="提交">
</form>

8、h5新增的表单校验

1、required，这个属性表示这个表单控件必须填写
2、pattern，这个属性指定控件填写的值必须符合指定的正则表达式，属性的值必须是一个合法的正则表达式
3、min、max、step，这三个属性的值只对应数值的类型、日期类型的<inpurt />有效

<form action="test.html" method="post" target="_blank">
    图书名：<input type="text" name="name" required> <br>
    图书ISBN：<input type="text" name="isbn" required pattern="\d{3}-\d-\d{3}-\d{5}"> <br>
    图书价格：<input type="number" name="price" min="20" max="150" step="5"> <br>
    <input type="submit" value="提交">
</form>