HTML表单详解：元素与提交机制-CSDN博客

本文链接：https://blog.csdn.net/weixin_47782618/article/details/123942762

1. 什么是表单

表单的作用：收集用户信息，提交到服务器，服务器经过一系列处理，反馈回来，使页面具有交互性。

表单是由窗体和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框、按钮叫做控件。表单很像容器，它能容纳各种各样的控件。

表单不可以相互嵌套。

<form action="url" method="get|post" name="myform"></form>

name：表单提交时的名称

action：表单提交到的地址

method：提交方式，默认值为get

post和get的区别：

① url可以看到通过get提交的数据（不安全），而通过post的则不能。

② get一般用于提交少量数据（不大于2KB），post一般用于提交大量数据。

2KB=2048B，一个英文字母占1B，一个汉字占2B。

2. 表单元素

2.1 表单标签：form

2.2 表单域

表单标签中用来收集用户输入的每一项，如文本域，下拉列表，单选框、复选框等。

2.3 表单按钮

表单域和表单按钮都属于表单元素。

3. 文本框

<form>
    username:<input type="text" name="username" value="blank" disabled>
</form>

name：表单的名字 value：默认值

disabled属性使得域无法被编辑。

4. 密码框

<form>
    password:<input type="password" name="password">
</form>

5. 单选按钮

<form>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female" checked>女
</form>

checked属性设置默认值，常用于单选框和复选框。

6. 复选框

<form>
    <input type="checkbox" name="fruit" value="apple">苹果
    <input type="checkbox" name="fruit" value="watermelon">西瓜
</form>

7. 文件

<form enctype="multipart/form-data">
    <input type="file" name="img">
</form>

enctype="multipart/form-data" 用于修改表单的编码格式为二进制。

8. 隐藏域

<form>
    <input type="hidden" name="student" value="wu">
</form>

隐藏域可以正常提交，但对于用户是不可见的，常常用于存储默认值，或者由js改变它的值。

9. 提交按钮

<form>
    <input type="submit" value="submit">
</form>

10. 重置按钮

<form>
    <input type="reset" value="reset">
</form>

重置表单值为默认值

11. 按钮

<form>
    <input type="button" value="普通按钮">
</form>

12. 图像图片按钮

<form>
    <input type="img" src="url">
</form>

13. 按钮标签：button

<form>
    <button type="button|reset|submit">
</form>

14. 下拉列表

<form>
    <select>
        <optgroup label="Swedish Cars"> 
            <option value="volvo">Volvo</option> 
            <option value="saab" selected>Saab</option> 
        </optgroup> 
        <optgroup label="German Cars"> 
            <option value="mercedes">Mercedes</option> 
            <option value="audi">Audi</option> 
        </optgroup> 
    </select>
</form>

selected属性用于设置下拉列表的默认值。

15. 多行文本框

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

rows和cols用于设置多行文本框的大小。

readonly属性设置为只读，与disabled类似，但显示样式有不同。

16. label标签

<form>
    <label for="male">男</label>
    <input type="radio" name="sex" value="male" id="male">
    <label for="female">女</label>
    <input type="radio" name="sex" value="female" id="female">
</form>

点击文字也可以选择，常用于单选框和复选框。

17. email

<form>
    E-mail: <input type="email" name="usremail">
</form>

提交表单时会自动对email字段的值进行验证，只验证是否存在@，以及@后是否有内容。

18. url

<form>
    网址: <input type="url" name="url">
</form>

提交表单时会自动对url字段的值进行验证，只验证是否有协议，以及协议后是否有内容。

19. search

<form>
    搜索: <input type="search" name="search">
</form>

20. tel

<form>
    电话号码: <input type="tel" name="usrtel">
</form>

主要用于移动端，PC端无效果。

21. color（取色器）

<form>
    <input type="color" name="color">
</form>

22. number

<form>
    数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5" value="3" step="0.5">
</form>

min：最小值 max：最大值 value：默认值 step：最小的合法数字间隔

23. range

<form>
    数量 ( 1 到 5 之间): <input type="range" name="quantity" min="1" max="5" value="3" step="0.5">
</form>

定义用于精确值不重要的输入数字的控件。

24. date

<form>
    生日: <input type="date" name="bday">
</form>

25. month

<form>
    生日: <input type="month" name="bday">
</form>

26. week

<form>
    生日: <input type="week" name="bday">
</form>

27. input标签在HTML5新增属性

<form>
    username:<input type="text" name="username" placeholder="blank" minlength="2" maxlength="5">
</form>
<form>
    username:<input type="text" name="username" autofocus required>
</form>

autofocus属性使域在页面加载时自动获得焦点。

placeholder属性提供提示，描述输入域期待的值。

minlength属性设置字段的最小值，字母和汉字均为一个单位长度，maxlength同理。

required属性表示该输入域不能为空。

<form>
    <input type="file" name="img" multiple>
</form>

mutiple属性规定输入域中可以选择多个值，多个值间用逗号隔开，适用于file和email。

28. 实体字符

HTML中的预留字符必须被替换成实体字符，实体字符大小写敏感。

空格   HTML只能识别一个连续的空格。

< <

> >

" "