HTML文本框和单选框

大家好，给大家讲一下HTML文本框和单选框这是它常见的一些属性上源码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>登录注册</title></head><body><h1>注册</h1><

思诚代码块

4969人浏览 · 2022-01-23 21:37:10

思诚代码块 · 2022-01-23 21:37:10 发布

大家好，给大家讲一下HTML文本框和单选框

这是它常见的一些属性

在这里插入图片描述

上源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--表单form-->
<!--action: 表单提交的位置，可以是网站，也可以是一个请求处理的地方-->
<!--method : post,get提交方式-->
<!--get   提交的方式比较高效，但是不安全-->
<form action="我的第一个网页.html" method="post">
    <p>名字: <input type="text" name="username"value="你是最好的"maxlength="8" size="30"></p>     
    <!--定义文本框中的原始值和大小-->
    <p>密码: <input type="password"name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">

    </p>
</form>

</body>
</html>

type="password      ：指的是文本类型： 密文

效果：

在这里插入图片描述
这个名字框里只可以输入8个字
因为我们源码当中就是这样写的

在这里插入图片描述
单选框

<p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女

    </p>

不在一个组里，俩个都可以选

<p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex1"/>女

    </p>

看结果：
在这里插入图片描述

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<h1>注册</h1>

<!--表单form-->
<!--action: 表单提交的位置，可以是网站，也可以是一个请求处理的地方-->
<!--method : post,get提交方式-->
<!--get   提交的方式比较高效，但是不安全-->
<form action="我的第一个网页.html" method="post">
    <p>名字: <input type="text" name="username"value="你是最好的"maxlength="8" size="30"></p>
    <p>密码: <input type="password"name="pwd"></p>
<!--单选框-->
    <p>性别:
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl" name="sex"/>女

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

    </p>
</form>

</body>
</html>