HTMLform表单属性的基本使用方法及介绍

本文介绍: 3.11 input 标签其中type的取值有很多如下：type 元素类型的取值元素类型效果作用 color 颜色域ema il邮箱 image 图像按钮 checkbox 多选按钮 radio 单选按钮 password 密码框text 文本框 submit 提交按钮 button普通按钮日期+时间 time时间reset复位按钮 file 文本域（上传文件的按钮）hidden 隐藏域。

1、HTML表单的基本介绍

HTML表单的作用是用于收集各种不同类型用户输入的各种数据信息，要实现表单<form&g t;标签是极其重要的。

2、form 标签的基本 说明及使用

2.1 form 标签一般是和i npu t 标签连用。

2.2 form 标签的基本 属性：

2.21 action

该属性为跳转路径，表示当点击提交按钮时，form 表单里的数据要提交到的服务器地址。

2.22 name

该属性为表单的名字通常情况下可以任取，但是表单名称不能包含特殊字符和空格。

2.23 method

该属性是用来明确表单提交的方式，提交方式有 get post等等，默认为get（get 请求会把用户信息暴露在地址栏上）建议使用 post。

3、表单元素的基本介绍及使用

3.1 HTML的表单元素一般由 i npu t，textarea，select 标签构成，需要 放到 form 标签内使用。

3.11 i npu t标签

该标签的语法如下：

&lt;input type="元素的类型" name="元素的名称" value="元素的值" &gt;

其中type的取值有很多如下：

type元素类型的取值
元素类型	效果作用
text	文本框
password –	密码框
radio	单选按钮
checkbox	多选按钮
submit	提交按钮
reset	复位按钮
button	普通按钮
image	图像按钮
file	文本域（上传文件的按钮）
hi d de n	隐藏域
ema il	邮箱
color	颜色域
date	日期
time	时间
datetime–local	日期+时间
range	进度条

3.12 in put标签的属性

in put标签的属性
required	不能为空白提交
readonly	只读（只可以读不能修改）
checked	默认选择
disabled	表示禁用不可以点击
auto f o cu s	默认光标的位置

3.13 f orm标签与in put标签连用代码 演示如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body><h1>登录</h1>
    <form action="第二天demo03.html">
        用户名：<input type="text" name="username"readonly><br>
        密码框:  &amp;nbsp;<input type="password" name="username"autofocus required>
<p>   请选择你的性别：<input type="radio" value="男" name="gender"checked>男
    <input type="radio"value="女"name="gender">女
</p>
<p>
    请选择你的爱好：
    <input type="checkbox"name="hobby">唱歌
    <input type="checkbox"name="hobby">跳舞
    <input type="checkbox"name="hobby">rap
    <input type="checkbox"name="hobby">打篮球
</p>
<input type="submit"><br>
<input type="reset"><br>
<input type="button"value="普通"><br>
<!-- <input type="image"> -->
<input type="file"><br>
<input type="hidden"lalue="55555"><br>
<input type="email"name="email"value="请填写邮箱"><br>
<input type="color"><br>
<input type="date"><br>
<input type="time"><br>
<input type="datetime-local"><br>
<input type="range"><br>
    </form>
</body>
</html>

3.2 select标签

select为下拉列表框，一般option标签进行连用。select有两个属性（1）selected 属性该属性为默认被选中的选项（2）multiple属性该属性是让下拉列表框以以列表形式显示。

代码演示：

<p>
        你的家庭住址是：<select name="" id="" >
            <option value=""selected>西安</option>
            <option value="">西安</option>
            <option value="">重庆</option>
            <option value="">上海</option>
            <option value="">广州</option>
        </select>
       </p>
       <p>
        您的收货地址是：<select name="" id=""multiple="multiple">
            <option value="">请选择你的收货地址</option>
            <option value="">永川</option>
            <option value=""selected>江北</option>
            <option value="">万州</option>
        </select>
       </p>
       <p>

运行结果显示

3.3 textarea标签

textarea标签是实现文本域，其中文本框的大小由cols多少列表示文本域的宽度和rows多少行表示文本域的高度，来决定的。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="">
<textarea name="" id="" cols="70" rows="70">这几伙很懒，什么都没有留下！
</textarea>
</form>
</body>
</html>

运行结果

下面是一个完整的form表单的代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body align="center">
    <h1 >用户注册</h1>
    <form action="">
       <p>
        用户名：<input type="text" name="username" id="username">
       </p>
       <p>
        密 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; 码：<input type="password" name="userpassword" id="userpassword"autofocus>
       </p>
       <p>
        请选择你的性别：<input type="radio" name="sex" id="sex"checked>男<input type="radio" name="sex" id="sex">女
       </p>
       <p>
        请选择你的爱好：<input type="checkbox" name="hobby">足球
                       <input type="checkbox" name="hobby">篮球
                       <input type="checkbox" name="hobby">LOL
                       <input type="checkbox" name="hobby">韩剧
                       <input type="checkbox" name="hobby">王者荣耀
       </p>
       <p>
        邮箱：<input type="email" name="email" value="请输入你的邮箱">
       </p>
       <p>
        用户头像：<input type="file">
       </p>
       <p>
        你的家庭住址是：<select name="" id="" >
            <option value=""selected>西安</option>
            <option value="">西安</option>
            <option value="">重庆</option>
            <option value="">上海</option>
            <option value="">广州</option>
        </select>
       </p>
       <p>
        您的收货地址是：<select name="" id=""multiple="multiple">
            <option value="">请选择你的收货地址</option>
            <option value="">永川</option>
            <option value=""selected>江北</option>
            <option value="">万州</option>
        </select>
       </p>
       <p>
        请留下您的建议或者意见：<textarea name="" id="" cols="30" rows="10">您的建议或者意见</textarea>
       </p>
       <p>
        请您选择您喜欢的颜色：<input type="color" name="color">注册的时间：<input type="datetime-local" name="datetime-local" >
       </p>
       <p>
        <input type="submit"value="注册">
        <input type="reset">
       </p>
    </form>
</body>
</html>