HTML|文本框和单选框

最新推荐文章于 2022-12-11 12:36:53 发布

Alan_Lowe

最新推荐文章于 2022-12-11 12:36:53 发布

阅读量963

点赞数 1

分类专栏： # HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_45985728/article/details/118976415

版权

HTML 专栏收录该内容

26 篇文章 5 订阅

订阅专栏

HTML|文本框和单选框

以表单为基础：
HTML|表单post和get提交

1.文本框

我们已经写好了一些基本的表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h2>注册</h2>

<form action="https://blog.csdn.net/qq_45985728" method="post">
    <p>用户：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-avUzdt1m-1626872483351)(D:\Alan_Lowe\Alan_LoweStudy\HTML\图片\13.1.png)]

我们还可以对文本框进行一些设置：

对文本框的长度进行设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h2>注册</h2>

<form action="https://blog.csdn.net/qq_45985728" method="post">
    <p>用户：<input type="text" name="username" size="30"></p>
    <p>密码：<input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>

</body>
</html>

将用户一栏中的input标签加上属性size=30：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QUTHTrVQ-1626872483353)(D:\Alan_Lowe\Alan_LoweStudy\HTML\图片\13.2.png)]

我们可以看到，用户输入一栏的长度改变了。

在平时使用这样的输入栏的时候往往都会有用户名不得超过多少长度，这个也是可以实现的

我们再添加上maxlength=“5”：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h2>注册</h2>

<form action="https://blog.csdn.net/qq_45985728" method="post">
    <p>用户：<input type="text" name="username" size="30" maxlength="5"></p>
    <p>密码：<input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2nmiPThM-1626872483354)(D:\Alan_Lowe\Alan_LoweStudy\HTML\图片\13.3.png)]

在输入了5个字符之后我们就不能在继续输入了，输入的内容全部被忽略了。

设置默认值

我们还可以对文本框设置默认值，比如把上述的用户名文本框设置为Alan_Lowe，只需要添加一个value属性即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h2>注册</h2>

<form action="https://blog.csdn.net/qq_45985728" method="post">
    <p>用户：<input type="text" name="username" size="30" maxlength="10" value="Alan_Lowe"></p>
    <p>密码：<input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zyim3ElZ-1626872483356)(D:\Alan_Lowe\Alan_LoweStudy\HTML\图片\13.4.png)]

2.单选框

我们平时在使用网站或者填写信息的时候都会遇到填写性别这样的单选框，怎么样在设置一个选项框呢？

我们把一个input标签的type改为radio：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框和单选框</title>
</head>
<body>

<h2>注册</h2>

<form action="https://blog.csdn.net/qq_45985728" method="post">
<!--
size表示文本框的长度
maxlength表示输入内容的长度限制
value表示文本框的默认值

-->
    <p>用户：<input type="text" name="username" size="30" maxlength="10" value="Alan_Lowe"></p>
    <p>密码：<input type="password" name="pwd"></p>

<!--
单选框
input的type改为radio
-->
    <p>
        <input type="radio">
    </p>


    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>

</body>
</html>

打开网页即可看到有了一个选项按钮：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-scbBWrBu-1626872483357)(D:\Alan_Lowe\Alan_LoweStudy\HTML\图片\13.5.png)]

比如我们要在网页中写一个性别选项：

性别两个字，之后跟两个选项，将两个选项的value设定为一个值（选项框和文本框不一样，必须要有value不然就没有意义了）并且使用男字和女字对选项进行修饰：

<p>
    性别：
    <input type="radio" value="male">男
    <input type="radio" value="female">女
</p>

打开网页：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q8be9CER-1626872483358)(D:\Alan_Lowe\Alan_LoweStudy\HTML\图片\13.6.png)]

可以看到性别选项就生成了，但是它不是单选的，这是因为我们设置的两个选项没有放在同一个类别中，我们可以添加一个name属性，并且将两个选项的name属性改为相同的：

<p>
    性别：
    <input type="radio" value="male" name="gender">男
    <input type="radio" value="female" name="gender">女
</p>

这样之后呢，就是单选了，男和女只能选择一个。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本框和单选框</title>
</head>
<body>

<h2>注册</h2>

<form action="https://blog.csdn.net/qq_45985728" method="post">
<!--
size表示文本框的长度
maxlength表示输入内容的长度限制
value表示文本框的默认值

-->
    <p>用户：<input type="text" name="username" size="30" maxlength="10" value="Alan_Lowe"></p>
    <p>密码：<input type="password" name="pwd"></p>

<!--
单选框
input的type改为radio
value必须要有，否则就没有意义
name决定它们是一个类型的，只能选一个
-->
    <p>
        性别：
        <input type="radio" value="male" name="gender">男
        <input type="radio" value="female" name="gender">女
    </p>


    <p>
        <input type="submit">
        <input type="reset">
    </p>
    
</form>

</body>
</html>

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML|文本框和单选框

HTML|文本框和单选框以表单为基础：HTML|表单post和get提交添加链接描述1.文本框我们已经写好了一些基本的表单：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单</title></head><body><h2>注册</h2><form a
复制链接

扫一扫