9月8日HTML表单元素（form、文本、按钮、选择）

表单元素

一、form

form代表表单，功能：用于申明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。<form> 标签用于为用户输入创建 HTML 表单。表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、type、name、value等元素。表单用于向服务器传输数据。

1.action

action 属性规定当提交表单时，向何处发送表单数据，把数据提交给哪个网站。

2.method

method表示数据提交方式，提交方式有两种：

get—显式提交，有长度限制。

post—隐式提交

3.target

target表示提交方式，提交方式主要有以下几项。

_blank：在新窗口中打开。 _parent：在父框架集中打开。

_self：默认。在相同的框架中打开。 _top：在指定的框架中打开。

二、文本

1.文本框<input type="text" />，其属性有：

value文本框的值，就是文本框里面显示的内容。

name文本框的名称

2.密码框<input type="password" />，虽然密码框和文本框相似，但在密码框里面输入内容时不显示内容，只显示●。

3.隐藏域<input type="hidden />,隐藏域的属性有：

name密码框的名称

value密码框的值

4.文本域<input /><textarea></textera>，双标签元素，值不是写在value属性里面的，是写在开始结束标签之间的，现在所学内容还不能够调整文本域的大小。示例代码：<input /><textarea>无言</textarea>，文本域里面就会显示“无言”。

三、按钮

1.普通按钮<input type="button" />，只显示一个按钮，但是点上去没有反应。

2.提交按钮<input type="submit" />，具有提交功能。按钮上显示“提交”，提交按钮的属性有：

name：按钮的名字

value：按钮上显示的名字。<input type="submit" value="按钮" />，按钮上就会显示“按钮”两个字，替换了默认的“提交”。

3.重置按钮<input type="reset" />,作用是将表单里的内容重置。

<form target="_blank" action="Untitled-3.html" method="post">
    <input type="text" />
    <input type="submit" />
    <input type="reset" name="" value="重置" />
</form>

4.图片按钮<input type="image" />提交数据,其属性有：

name：按钮的名字。

src：图片按钮的图片来源地址。

四、选择

1.单选按钮<input type="radio" />,单选按钮的属性有：

name：按钮名称和组名

value：按钮的值

<input type="radio" name="sex" value="" />男
<input type="radio" name="sex" value="" />女

上面2行代码表示单选（选男或女），input type="radio"表示此代码为单选按钮，name="sex"表示此2行代码为一组。男、女为选项，只能选一个选项。

2.复选框<input type="checkbox" />,复选框的属性有：

name：复选框的名称

value：复选框的值

<input type="checkbox" name="" value="" />A
<input type="checkbox" name="" value="" />B
<input type="checkbox" name="" value="" />C
<input type="checkbox" name="" value="" />D

上面4行代码表示复选（多选），<input type="checkbox" />表示此组代码为复选代码，A、B、C、D表示4个选项，可以选1-4个选项。

3.下拉列表<select></select>双标签，下拉列表属性有：

name--下拉列表名称

<option></option>：代表项,就是下拉列表里的选项。

<select>
    <option>张店</option>
    <option>淄川</option>
    <option>恒台</option>
    <option>周村</option>
</select>

上面代码内容表示下拉列表里面有张店、淄川、恒台、周村四个选项。

value：该项的值。

4.文件选择<input type="file" name="" value="" />，文件选择的属性有：

name--文件选择的名称

5.其它属性

①readonly 只读

②disabled 不可用，同时不能提交

③hidden 隐藏

④checked radio checkbox 用来做选中

⑤selected 用在下拉列表，设置哪一项选中

9月8日HTML表单元素（form、文本、按钮、选择）

相关推荐