HTML中的表单（超详细）

一、表单

1.语法

<!-- action：提交的地方 method：提交的方式（get会显示，post不会）
-->
<form action="#" method="get"><p>名字：<input name="name" type="text"/></p><p>密码：<input type="password" name="pwd" id=""></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p>
</form>

在实际的网页开发中通常采用post方式提交表单中的数据

2.表单元素格式

<!-- 基本语法 -->
<input type="input元素类型" name="input元素名称" value="input元素的默认值" />

3.表单元素

3.1文本框

<input name="name" type="text" value="蔡徐坤" size="3" maxlength="3"/>

3.2密码框

<input type="password" name="pwd" value="123" size="13" maxlength="13">

3.3单选按钮

<p>性别：<input type="radio" name="gender" value="男">男<input type="radio" name="gender" value="女" checked>女
</p>

radio：单选按钮

name：如果是一组，那么取相同的name

对于radio，value是必须的

checked:单选按钮默认选中的状态

3.4复选框

<p>爱好：<input type="checkbox" name="hob" value="sports"/>运动<input type="checkbox" name="hob" value="talk" checked/>聊天<input type="checkbox" name="hob" value="play"/>玩游戏
</p>

checkbox：复选框

name：一组复选框有相同的name

value：值

checked：复选框默认选中状态

3.5列表框（下拉列表框）

<p>年龄:<select name="age"><option value="18">18岁</option><option value="19" selected = "selected">19岁</option><option value="20">20岁</option></select>
</p>

select：列表框

option：选项

value：表单提交的选项的值，如果不写默认提交option中的类容

selected：默认选中项

3.6按钮

图片按钮

<p><input type="submit" value="提交"><input type="reset" value="重置">
</p>
<p><input type="image" src="images/btn.png"><input type="button" value="普通按钮">
</p>

submit：提交按钮

reset：表单重置按钮

image：图片提交按钮

button：普通按钮，天生不具备任何功能，可通过js赋予功能

3.7多行文本域

<p>个人简介：<textarea cols="30" rows="10" name="person">文本内容</textarea>
</p>

textarea：多行文本域

cols：显示的列数

rows：显示的行数

3.8文件域

<form action="#" method="get" enctype="multipart/form-data"><p>头像：<input type="file" name="files"></p>
</form>

file:文件域

enctype=“multipart/form-data”：如果要上传文件必须加。它表示表单编码属性

3.9邮箱

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

type如果指定是email，会自动验证email地址格式是否正确

3.10网址

<p>个人网站：<input type="url" name="net">
</p>

type指定是url，会自动验证url地址格式是否正确

3.11数字

<p>年龄：<input type="number" name="myage" min="0" max="10" step="2">
</p>

number:表示是数字输入框

min：最小值

max：最大值

step：步进（每次加/减多少）

3.12滑块

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

range：滑块

min：允许的最小值

max：允许的最大值

step：合法的数字间隔

3.13搜索框

<form action="#" method="get"><p>请输入搜索的关键字：<input type="search" name="sousuo"><input type="submit" value="搜索"></p>
</form>

search

4.表单的高级应用

4.1隐藏域

表单在提交的时候需要提交，但是又不希望被用户看到，这样就需要用到隐藏域

<input type="hidden" name="id" value="123">

type=hidden

4.2只读

姓名：<input type="text" name="name" id="" value="蔡徐坤" readonly>

readonly：只允许读，不允许修改

4.3禁用

<input type="submit" value="提交" disabled>

disabled:表示禁用

5.表单元素的标注

增强鼠标的可用性

自动将焦点转移到与该标注相关的表单元素上

<label>标签的for属性应该与表单控件的id属性值相同，以此来建立<label>与表单控件之间的关联。如果<label>元素直接包含了表单控件（如<input>），则不需要使用for属性，因为关联是隐式的。

示例1：使用for属性
<p><label for="age">年龄：</label><input type="number" name="age" id="age">
</p>示例2：隐式关联
<form>  <label>  邮箱:  <input type="email" id="email" name="email">  </label>  <br><br>  <!-- 其他的表单元素 -->  
</form>

6.表单初级验证

6.1为什么要进行表单验证

表单验证好处：

• 减轻服务器的压力

• 保证数据的可行性和安全性

6.2初级方法

6.2.1placeholder

• input类型的文本框提供一种提示
• 可以描述文本框期待用户输入何种内容
• 提示语默认显示，当文本输入框中输入内容的时候，提示语消失
• 适合于input标签：text、search、url、email和password等类型

<p>用户名：<input type="text" name="name" id="" placeholder="请输入用户名，只能中文">
</p>

6.2.2required

• 规定文本框填写内容不能为空，否则不允许用户提交表单
• 适合于input标签：text、search、url、emial、password、number、checkbox、radio、file等类型

<p>用户名：<input type="text" name="name" id="" placeholder="请输入用户名，只能字母" required>
</p>

6.2.3pattern

用户输入内容必须符合正则表达式所指的规则，否则不能提交表单

 <!-- pattern:规则，要求我们写正则表达式[]表示一位，中间缩写的内容可以任选一个是合法的0-9 表示从0到9    a-z：从小写a到小写z[xx]{n}  他表示前面的一位按照规则重复n次用户名只能是数字、字母或下划线，并且长度是3到15[xxx]{1,}至少重复一次，无上限--><form action="#" method="get"><p>用户名：<input type="text" name="name" id="" placeholder="请输入用户名" required pattern="[a-zA-Z0-9_]{3,15}"></p><p>密码：<input type="password" name="pwd" id="" placeholder="请输入密码"></p><p>手机号：<input type="text" name="tel" required pattern="1[3578][0-9]{9}"></p><p><input type="submit" value="提交"></p></form>

二、总结