HTML笔记表单域

最新推荐文章于 2022-05-31 17:56:18 发布

yogur_father

最新推荐文章于 2022-05-31 17:56:18 发布

阅读量490

点赞数 1

分类专栏：入门学习文章标签： html

本文链接：https://blog.csdn.net/yogur_father/article/details/109276590

版权

入门学习专栏收录该内容

156 篇文章 3 订阅

订阅专栏

一.结构

表单域整体使用<form> <form/>

其中有两个属性
一个是action="xxx.jsp"，表示点击提交，跳转的页面
另一个是methon="",他有两个值，一个是get，另一个是post
如果是post，会出现乱码，在处理request的返回值之前，使用request.setCharacterEncoding("UTF-8");编码

二.表单控件

输入元素input
下拉元素select
文本域元素textarea

输入元素`input`

这个标签中有一个属性是type
表示输入框的类型

在这里插入图片描述

① 输入文本密码单选多选

在这些属性中，重要的是name，value，checked，maxlength

name表示在同一组件中，比如多选框和单选框，必须在同一个name下，才能实现单选，多选的功能
value在文本类的组件中相当于初始值，在选择框中，表示选择这个框后，传给后台的值，比如选择“男”，那就要给后台传输value值，也就是我们设定好的“男”
chencked在选择框中，如果这个属性设定为chencked，那么是默认被选中的
maxlength表示最大输入字符数

name只是组件的名字，告诉后台这个变量是什么
value才是真正要获得数据，而且也是显示在页面上的东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表格 </title>
</head>
<body>
    <form>
        用户名：                <input type = "text"/ name="username" value="请输入用户名" maxlength="6">         <br/>
        密码&nbsp;&nbsp;&nbsp; ：<input type = "password"/ name="pw" >                              <br/>
        性别&nbsp;&nbsp;&nbsp; ：男<input type = "radio"/ name="sex" value="男" checked="checked">  女<input type="radio"/ name="sex" value="女">  <br/>
        爱好&nbsp;&nbsp;&nbsp; ：java<input type="checkbox"/ name="hobby" value="java" checked="checked"> 
                                C++ <input type="checkbox"/ name="hobby" value="C++"> 
                                Python <input type="checkbox"/ name="hobby" value="Python" checked="checked"> <br/>
    </form>
</body>
</html>

在这里插入图片描述

② 提交重置按钮
提交使用type = "submit",也可设置按钮的名字，在value = “免费注册”
重置使用type = "reset",也可设置按钮的名字，在value = “重写”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表格 </title>
</head>
<body>
    <form>
        用户名：                <input type = "text"/ name="username" value="请输入用户名" maxlength="6">         <br/>
        密码&nbsp;&nbsp;&nbsp; ：<input type = "password"/ name="pw" >                              <br/>
        性别&nbsp;&nbsp;&nbsp; ：男<input type = "radio"/ name="sex" value="男" checked="checked">  女<input type="radio"/ name="sex" value="女">  <br/>
        爱好&nbsp;&nbsp;&nbsp; ：java<input type="checkbox"/ name="hobby" value="java" checked="checked"> 
                                C++ <input type="checkbox"/ name="hobby" value="C++"> 
                                Python <input type="checkbox"/ name="hobby" value="Python" checked="checked"> <br/>
        <input type="submit" value="免费注册"/>
        <input type="reset" value="重新设置"/>
    </form>
</body>
</html>

在这里插入图片描述
注：提交的内容是每个组件中value中的内容

③普通按钮打开文件
普通按钮使用type = "button",使用value改变他的按钮显示的名字，后期和 js 一起配合使用
打开文件使用type = “file”，使用value改变他的按钮显示的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表格 </title>
</head>
<body>
    <form>
        用户名：                <input type = "text"/ name="username" value="请输入用户名" maxlength="6">         <br/>
        密码&nbsp;&nbsp;&nbsp; ：<input type = "password"/ name="pw" >                              <br/>
        性别&nbsp;&nbsp;&nbsp; ：男<input type = "radio"/ name="sex" value="男" checked="checked">  女<input type="radio"/ name="sex" value="女">  <br/>
        爱好&nbsp;&nbsp;&nbsp; ：java<input type="checkbox"/ name="hobby" value="java" checked="checked"> 
                                C++ <input type="checkbox"/ name="hobby" value="C++"> 
                                Python <input type="checkbox"/ name="hobby" value="Python" checked="checked"> <br/>
        <input type="submit" value="免费注册"/>
        <input type="reset" value="重新设置"/> 

        <div>wocao</div>

        <!-- 普通按钮 -->
        <input type="button" value="获取验证码"/> <br/>
        <input type="file" value="上传头像"/>
    </form>
</body>
</html>

在这里插入图片描述

④ Label标签

这个和其他组件一起使用
当点击标签的时候，也能出现点击组件一样的效果
只要将这个组件（可以是图片）放在label之间就可以

使用<Label for = "who"> </Label>
组件中有个属性id = “who”，for和id的内容必须一样
不过这个内容可以不和属性name的值一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表格 </title>
</head>
<body>
    <form>
        <label for="name">用户名：</label>                
        <input type = "text" name="username" value="请输入用户名" maxlength="6" id="name">         <br/>

        <label for="man">男</label>
        <input type="radio" id="man" name="sex">
        <label for="woman">女</label>
        <input type="radio" id="woman" name="sex">

    </form>
</body>
</html>

在这里插入图片描述

下拉元素select

使用<select> </select>
里面的选项使用<option> </option>
如果想让某一项默认，将option里面的selected属性设置为selecte

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表格 </title>
</head>
<body>
    <form>
        籍贯：
        <select>
            <option>甘肃</option>
            <option selected = "selected">北京</option>
            <option>安徽</option>
        </select>
       
    </form>
</body>
</html>

在这里插入图片描述

多行文本

使用<textarea> </textarea>
在这两个标签之间可以直接写默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 表格 </title>
</head>
<body>
    <form>
        宝贵意见：
       <textarea>不少于50字</textarea>
       
    </form>
</body>
</html>

在这里插入图片描述

yogur_father

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记表单域

一.结构表单域整体使用<form> <form/>二.表单控件输入元素input下拉元素select文本域元素textarea输入元素input这个标签中有一个属性是type表示输入框的类型① 输入文本密码单选多选在这些属性中，重要的是name，value，checked，maxlengthname表示在同一组件中，比如多选框和单选框，必须在同一个name下，才能实现单选，多选的功能value在文本类的组件中相当于初始值，在选择框中，表示选择这个
复制链接

扫一扫