HTML5表单元素

深藏阁楼爱情的钟 2022-05-19 22:22 301阅读 0赞

# 一、表单控件 #

## 1.<form>元素 ##

用于生成表单，属性如下

1.  action指定表单的发送地址（服务器地址）

2.  method是表单数据发送至服务器的方法，常用的有两种：get、post，用的input 的type属性值是submit，“提交”是这个按钮value属性的默认值

3.  get和post的区别：

（1）get方法提交，数据会附在网址之后主动提交给服务器

（2）post方法提交数据不会附在网址后，会将数据打包发送给服务器，等候服务器来读取数据进行处理

4.  还可以添加一个target属性，指定在新窗口打开

## 2.  Input元素 ##

（1）type属性：指定输入内容的类型，默认为text，单行文本框，还有password、submit、reset、button这些值

文本框    <input type = "text" />

密码框    <input type = "password" />

隐藏域    <input type = "hidden" />

文本域    <textarea></textarea>

按钮类：

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

提交按钮  <input type = "submit" value = "提交" />

重置按钮  <input type = "reset" value = "重置" />

图片按钮  <input type = "image" />

（2）还有其他比较重要的属性，例如：

checked : 表示默认被选中，只有当type为checkbox和radio是才可以使用

disbale：设置禁用该元素，不可以被提交

maxlength：这是文本框的最大长度

readonly：=不允许被修改，可以被提交

size：指定元素的宽度

src：指定图像的URL

我们用一个小例子来实现上面的元素和属性图。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单元素</title> </head> <body> <form action="表单元素标签" method="post"> 单行文本框：<input type="text" name="username"/><br /> 不能编辑的文本框：<input type="text" name="disableUserName" readonly="readonly" /><br /> 不能提交的文本框：<input type="text" name="disableUserName" disabled="disabled" /><br /> 密码框：<input type="password" name="password" /><br /> 隐藏域：<input type="hidden" name="hid" value="隐藏域" /><br /> 提交：<input type="submit" value="提交" /><br /> 重置：<input type="reset" value="重置" /><br /> 第一组单选框<br /> 红：<input type="radio" name="color" value="红" checked="checked"/> 绿：<input type="radio" name="color" value="绿" /> 蓝：<input type="radio" name="color" value="蓝" /><br /> 第二组单选框<br /> 男:<input type="radio" name="sex" value="男"/> 女：<input type="radio" name="sex" value="女" /> <br /> 三个复选框：<br /> 华为：<input type="checkbox" name="phone" value="华为" checked="checked"/> 苹果：<input type="checkbox" name="phone" value="苹果" /> 三星：<input type="checkbox" name="phone" value="三星" /> <br /> 文件上传域：<input type="file" name="file" /><br /> 图像域：<input type="image" name="image" src="111.png" alt="Eclipse"/>Eclipse<br /> 下面是四个按钮：<br /> <input type="button" id="btn1" value="按钮1" /> <input type="button" id="btn2" value="按钮2" /> <input type="button" id="btn3" value="按钮3" /> <input type="button" id="btn4" value="按钮4" /> </form> </body> </html>

页面如下

![70][]

[70]: /images/20220520/19a57ae61a184530afddc3d8ec30b858.png