HTML- 表单(简单易懂）

表单：表单主要用来制作动态网页，方便和用户进行交互

表单语法：

<form method=" " action=" " enctype="multipart/form-data"></form>

enctype在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。

method值可以为：get/post（实际开发中用post传递给服务器）

action表示向何处发送表单数据（地址）

表单元素：

语法：

<input  type="text"(input元素类型) name="fname" value="text">

type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

文本框：text

<input type="text" name="text" value="文本框" size="30" maxlength="10"/>

size:文本框长度

maxlength:文本框输入最多字符

密码框：password

 <input type="password" name="password" size="30"/>

单选按钮：

<input checked name="gender" type="radio" value="男" />男
<input name="gender" type="radio" value="女" />女
<input name="gender" type="radio" value="组合" />组合

checked:选中状态

复选按钮：

<input  checked name="sport" type="checkbox" value="篮球" />篮球
<input name="sport" type="checkbox" value="足球" />足球
<input name="sport" type="checkbox" value="棒球" />棒球

按钮:

<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" / > 
<input type="button" value="一般按钮" />
图片按钮
<input type="image"  src="./renren.gif" />

下拉列表：

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

selected:默认选中项

size:下拉列表显示的行数

多行文本域：

<textarea  name="text " cols="x"  rows="y">文本内容
</textarea  >

cols:显示的列数

rows:显示的行数

文件域：

<p>
 <input type= "file"  name="files" />
 <input type="submit" name="upload"  value="上传"/>
</p>

邮箱：会自动验证Email地址格式是否正确

 <input type="email" name="email" id="box" required/>

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

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

数字：number数字

<input type="number" name="number" value="数字" min="0"max="100" step="10" />

min:允许最小值

max:允许最大值

step:合法数字间隔

滑块：效果图

<input type="range" name="range"  min="0" max="10000000" />

range(滑块）           min:允许最小值                   max:允许最大值 

搜索框：search

<input type="search" name="search" />

隐藏域：hidden

<input type="hidden" value="隐藏内容" name="info" />

只读和禁用：

<input name="text " type= "text"  readonly/>
<input type= "submit"   disabled   value="保存"/>

表单元素的标注：

 <label for="box">确认密码  </label>
 <input type="password" name="password" id= "box"  required />

表单初级验证方法：

placeholder:

input类型的文本框提供一种提示可以描述文本框期待用户输入何种内容，提示语默认显示，当文本框中输入内容时提示语消失。

适合于input标签：text、search、url、email和password等类型

required:

规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

pattern:

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

  <input  type="text"  id="text " required 
 pattern="[-\w\u4E00-\u9FA5]{4,10}"  placeholder="昵称"/>