html form表单常用的表单元素有那些?

作者:前端大神~ | 时间:2019-05-19

HTML的form表单中包含了很多的表单元素,但常用的表单元素都有那些呢?下面我就为大家介绍下。

数据提交方式

action:表示当前表单中的内容提交给哪个页面进行处理

HTML的form表单发送数据常用的提交方式有:get|post

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

表单提交中get和post方式的区别

get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。
get相对安全性非常低,post相对安全性较高。

表单元素的格式

表单元素的格式

常用的表单元素

1文本框

<input  type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />

2密码框

<input  type="password "(密码框)  name="pass"(密码框的名称)  size="20"(密码框的长度) />

3单选按钮

<input name="gen" type="radio"(单选按钮框) value="男"(值)  checked(单选按钮选中状态)  />男
<input name="gen" type="radio" value="女" />女

4复选框

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

5列表

<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>

6按钮

<input type="reset" (重置按钮) name="butReset"  value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>

7文本域

<textarea(多行文本域)  name="showText"  cols="x"(显示的列数)  rows="y"(显示的行数)>文本内容 </textarea>

8上传域

<form action="" method="post" enctype="multipart/form-data"(表单编码属性)>
  <p><input type="file"(文件域) name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

9邮箱

<p>邮箱:<input type="email"(邮箱)  name="email"/></p>
<input type="submit"/>

10数字

<p>请输入数字:<input type="number"(数字)  name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
<input type="submit"/>

11滑块

<p>请输入数字:<input type="range"(滑块)  name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>
<input type="submit"/>

12隐藏域

<input type="hidden"(隐藏域) value="666" name="userid">

13只读和禁用

<input name="name" type="text" value="张三"  readonly(只读文本框)>
<input type="submit "  disabled (禁用)  value="保存" >

14label

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

<label for="id"(表单元素的id)>标注的文本</label>
<input type="radio" name="gender" id="male"/(表单元素id)>


以上就是我们在网页实际开发中会常用的表单元素。