HTML表单

最新推荐文章于 2024-04-17 16:42:41 发布

雀巢脆脆鲨-

最新推荐文章于 2024-04-17 16:42:41 发布

阅读量95

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_69761220/article/details/124734780

版权

表单基本结构

表单在中主网页要负责数据采集功能。有三个基本的组成部分：表单标签，表单域，表单按钮。

<body>
    <form action="" method="post">
        <input type="text">
    </form>
</body>

表单标签

功能:用于申明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器。

语法:<form action="url" method="post">... </form>

action是接受提交数据的执行程序地址。

method是表单数据提交的方式。

可选值:

get是显性的用户提交的信息在地址栏能看到

post是隐性的用户提交的数据在地址栏能看不到

表单域

1.文本框 text

文本框是一种让访问者自己输入内容的表单对象。

<input type="text" name="username" id="" value="请输入用户名">

属性：

name 文本框的内容

value 文本框的初始值

2.密码框 password

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

<input type="password" name="pwd" id="pwd" maxlength="10" minlength="6">

属性：

maxlength 可以输入的最大字符数

minlength 可以输入的最小字符数

3.单选框 radio

当需要访问者在单选项中选择唯一的答案时，就需要用到单选框了。例如：性别

       <input type="radio" name="sex" id="">男
       <input type="radio" name="sex" id="">女

注意：单选框中name属性值必须要一样，才能进行单选。

4.复选框 checkbox

可以在待选项中选中多个选项。

        <input type="checkbox" name="interest" value="sports" checked>运动
        <input type="checkbox" name="interest" value="talk">聊天
        <input type="checkbox" name="interest" value="play">玩游戏

属性：

checked 表示默认选中

5.下拉框 select

可以在一个有限的空间设置多种选项。

        <select name="">
            <option value="">请选择</option>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
            <option value="">4</option>
        </select>

6.多行文本框 <textarea></textarea>

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

<textarea name="" id="" cols="30" rows="10">1235122</textarea>

属性：

cols属性定义多行文本框的宽度，单位是单个字符宽度；

rows属性定义多行文本框的高度，单位是单个字符宽度；

7.文件上传框 file

文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。

<input type="file" name="" id="">

表单按钮

1.提交按钮 submit

用来将输入的信息提交到服务器。

<input type="submit" value="提交">

2.重置按钮 reset

用来重置表单。

<input type="reset" value="重置">

3.普通按钮 button

用来控制其他定义了处理脚本的处理工作。

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

表单控件

1.网址控件

<input type="url">

2.日期控件

<input type="date">

3.数字控件

				<!-- step="3"每次3个跳动-->
				<input type="number" step="3">

4.邮箱控件

<input type="email" >

5.滑块控件

        <!-- 默认数值是100，step="10"每10个滑动一次· -->
        <input type="range" step="10">

6.搜索控件

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