HTML知识点二——表单

表单：

基本语法：

html 复制代码

    <form method="post" action="xxx">
        <p>名字：<input name="name" type="text"></p>
        <p>密码：<input name="pass" type="password"></p>
        <p>
            <input type="submit" name="button" value="提交">
            <input type="reset" name="reset" value="重填">
            
        </p>

    </form>

method：提交方式

action：交到哪

type：元素类型

name：元素名

value：在文本框里意思是默认值，在按钮里意思是按钮名字

size：表单的初始宽度，当type为text或者password时，size以字符为单位；对于其他类型，以像素为单位

maxlength：当type类型为text或者password时，输入的最大字符数

checked：type为radio或者checkbox时，指定按钮是否被选中

html 复制代码

<input type="text" name="userName" value="用户名" size="30" maxlength="20">
<!-- 显然这个maxlength是小于size的 -->

html 复制代码

<input type="password" name="pass" value="密码框" size="10" >

单选按钮：

type="radio"

这里的checked是默认

多个单选选项name值需要一样，例如这里的name的值都相同，才能识别是同一组的

单选按钮是从这些一样的name值中选择其中一个

html 复制代码

<input type="radio" name="aa" value="买家" checked>买家
    <input type="radio" name="aa" value="卖家">卖家
    <input type="radio" name="aa" value="都是">两者都是

复选框：

type="checkbox"

多个多选选项name值需要一样，例如这里的name的值都相同，才能识别是同一组的

html 复制代码

<input name="fuxuan" type="checkbox" value="chat">聊天

列表框/下拉框

列表框就是这种

html 复制代码

 <select name="列表名称" size="行数">
        <option value="选项的值" selected>男</option>
        <option value="选项的值" >女</option>
</select>

name放在<select>标签中，就代表一组

select：列表框

selected：这个属性不需要赋值，只需要存在即可表示该选项被选中。

option：选项标签

size：比如size="2"就是一次性看见俩，没有什么实际用处

按钮：

html 复制代码

    <input type="reset" name="butReset" value="reset按钮">
    <input type="image" src="/HTML/image/歌曲2.png">
    <input type="button" name="butButton" value="button按钮">

1.重置按钮：type="reset"

2.图像按钮

html 复制代码

 <input type="image" src="xxx" value="图片按钮">

3.普通按钮

1.type=button

2.<button></button>

多行文本域：

默认值：<textarea >这里放默认值</textarea>，默认值不是用value了，而是放在标签之间，并且不能有空格啥的，不然文本域中也会有空格

textarea表示多行文本域

cols：代表显示的列数

row代表显示的行数

html 复制代码

<textarea name="showText" cols="10" rows="8" ></textarea>

文件域：

也就是上传文件

html 复制代码

<form action="xxx" method="post" enctype="multipart/form-data">
        <p>
            <input type="file" name="files"/>
            <input type="submit" name="upload" value="上传"/></p>            
        </p>
    </form>

type="file"表示的是文件域

enctype="multipart/form-data" 必须有这个，不然不显示

当表单包含文件上传时，必须使用multipart/form-data编码类型。这样，浏览器会将每个输入字段（包括文件）分割成多个部分，并为每个部分添加适当的边界标识符，以便在服务器端可以正确地解析和处理这些数据。

邮箱：

这个没什么实际用处，了解即可，因为验证不严格，并且样式在不同浏览器中不一样

html 复制代码

<p>邮箱：<input type="email" name="email"/></p>
  <input type="submit">

type="email"

注意：会自动验证Email地址格式是否正确

网址：

html 复制代码

<p>请输入你的网址：<input type="url" name="userUrl"></p>
    <input type="submit">

type="email"

注意：会自动验证URL地址格式是否正确

数字：

html 复制代码

<p>请输入数字：<input type="number" name="num" min="0" max="100" step="10">
</p>

type="number" 就是指数字

min：允许的最小值

max：允许的最大值

step：数字间隔

滑块：

type="range"

就是这种

html 复制代码

<p>请输入数字：<input type="range" name="range1" min="0" max="10" step="2">
</p>
<input type="submit"/>

min="0"允许的最小值

max="10"允许的最大值

step="2"数字间隔为2

表单的高级应用：

隐藏域：type="hidden"

第三行：在这个示例中，我们有一个用户名和密码输入框，以及一个隐藏域，其中包含用户的ID。当用户提交表单时，这个隐藏域的值也会被发送到服务器，但用户无法看到或编辑它。

html 复制代码

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="hidden" name="user_id" value="12345">
  <input type="submit" value="提交">
</form>

只读：readyonly

html 复制代码

<input name="name" type="text" value="张三" readonly>

禁用：disable

html 复制代码

<input name="name" value="保存" disabled>

例如：下拉列表的禁用，在select中

html 复制代码

<select disabled>
            <option selected>请选择身份</option>
            <option value="doctor">医生</option>
            <option value="teacher">老师</option>
        </select>

表单元素的标注，也就是点字表单元素有反应：

通过id和for，再增加一个lable标签来使用

意思就是之前是单选点按钮，现在单选点按钮点旁边的选项都可以了，增强实用性

html 复制代码

      <input type="radio" name="sex" id="female22">
      <label for="female22">这个字就可以选上面的单选按钮男</label>

      <input type="radio" name="sex" id="male11">
      <label for="male11">这个字就可以选上面的单选按钮女</label>

表单初级验证的方法：

为了减小服务器压力

placeholder属性:文本框的提示

只需要给placeholder让它等于一点汉字

就是相当于是文本框的一种提示，像下面这样：

html 复制代码

 <input type="search" name="suosuo" placeholder="请输入要搜索的关键字"/>
      <input type="text" name="text" placeholder="我是文本框"/>

适用于input 标签：text，search，url，email，password等类型

required属性:内容不能为空，否则不允许提交表单

不需要给值，布尔类型

例如下面这样

html 复制代码

<form action="/submit" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>
        <br>
        <input type="submit" value="提交">
      </form>

适用于input标签：text，password，url，search，radio，file，email，number

几乎适用于所有表单中的input的种类

pattern:输入的内容符合正则表达式

否则不能提交表单

html 复制代码

<input type="text" name="tel" required pattern="^1[346]\d{9}"

正则表达式：

这几个正则表达式比较常用

\d：匹配数字，等价于[0-9]。
\D：匹配非数字，等价于[^0-9]。
\w：匹配字母、数字或下划线，等价于[a-zA-Z0-9_]。
\W：匹配非字母、非数字和非下划线的字符，等价于[^a-zA-Z0-9_]。
\s：匹配空白字符，包括空格、制表符、换行符等。
\S：匹配非空白字符。
.：匹配除换行符之外的任意单个字符。
*：匹配前面的子表达式零次或多次。
+：匹配前面的子表达式一次或多次。
?：匹配前面的子表达式零次或一次。
{n}：匹配前面的子表达式恰好n次。
{n,}：匹配前面的子表达式至少n次。
{n,m}：匹配前面的子表达式至少n次，但不超过m次。
^：匹配输入字符串的开始位置。
$：匹配输入字符串的结束位置。
|：表示或（OR），匹配其前或后的子表达式。
()：标记一个子表达式的开始和结束位置。
[...]：定义一个字符集合，匹配其中任意一个字符。
[^...]：定义一个字符集合，匹配除了括号内字符以外的任意字符。
(?#...)：添加注释，不影响正则表达式的匹配结果。