一.form表单常用类型

类型	描述	示例
text	文本框	`<input type="text">`
password	暗文文本框	`<input type="password">`
email	有验证的邮箱表单	`<input type="email">`
number	数字文本框，只能输入数字	`<input type="number">`
date	年月日的数字滚轮	`<input type="date">`
radio	单选框	`<input type="radio">`
checkbox	复选框	`<input type="checkbox">`
image	图形化 submit 按钮	`<input type="image">`

下拉列表

select元素用来创建下拉列表</select>
<select> 元素中的 <option> 标签定义了列表中的可用选项。
示例

        <div>
        <select>
            <option value="0" required disabled>--请选择--</option>
            <option value="1">唱</option>
            <option value="2">跳</option>
            <option value="3">Rap</option> 
            <option value="4" selected>篮球</option> 
        </select>
        </div>

二.form表单常用属性

类型	描述	示例
name	控件名称，作为键值对的一部分与表单一同提交	`name="password"`
value	控件的初始值	`value="18"`
max	最大值	`max="2023-03-13"`
min	最小值	`min="1997-05-08"`
maxlength	value的最小长度(字符数)	`maxlength="18"`
minlength	value的最小长度(字符数)	`minlength="18"`
size	控件的尺寸	`size="18"`
selected	预先选定该选项。	`selected`
placeholder	出现在控件上的文字	`placeholder="请填写用户名"`
chenked	控件是否选中	`chenked`
required	布尔值。如果存在，这个值是必需的	`required`
disabled	布尔值。表单控件是否禁用	`disabled`

ps:

radio单选按钮允许在多个拥有相同 name 值的选项中选中其中一个。

         <div>
          <label for="sex">性别: 
            <input type="radio" name="gender" value="sex" id="sex" />男
            <input type="radio" name="gender" value="sex" id="sex" />女
            <input type="radio" checked name="secrecy" value="sex" id="sex" />保密
          </label>
        </div>

checkbox复选框需要返回多个值，需要在name属性中加[]。

 <!-- 复选框 -->
        <div>
        <label for="hobby">爱好:</label>
          <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>唱</label>
          <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>跳</label>
          <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>Rap</label>
          <label for="hobby"><input checked type="checkbox" value="hobby" name="hobby[]" id="hobby"/>篮球</label>
        </div>

三.用户注册表实例

<!DOCTYPE html>
<html lang="zh-CN">
  <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>Document</title>
  </head>
  <body>
    <form action="0313.php" method="post">
      <fieldset>
        <legend style="text-align: center">用户注册</legend>
        <input type="text">
        <!-- 文本框 -->
        <div>
          <label for="usname">账户:
            <input type="text" placeholder="不少于6位数" name="usname" id="usname" maxlength="12"/></label>
        </div>
        <!-- 暗文文本框 -->
        <div>
          <label for="password">密码:
            <input type="password" placeholder="输入密码" name="password" id="password" minlength="8"/></label>
        </div>
        <!-- 邮箱表单 -->
        <div>
          <label for="email">邮箱:
            <input type="email" placeholder="注意邮箱格式@" name="email" id="email"/></label>
        </div>
        <!-- 数字 -->
        <div>
            <label for="age">年龄:
                <input type="number" name="age" id="age" value="18" min="18" max="20">
            </label>
        </div>
        <!-- 日期 -->
        <div>
            <label for="birthday">
                <input type="date" name="birthday" id="birthday" value="1997-05-08" min="1997-05-08" max="2023-03-13">
            </label>
        </div>
        <!-- 单选框 -->
        <!-- check = "chcked"表示默认选择，应用于单选和复选 -->
        <!-- name需统一才可以单选，唯一选项-->
        <div>
          <label for="sex">性别: 
            <input type="radio" name="gender" value="sex" id="sex" />男
            <input type="radio" name="gender" value="sex" id="sex" />女
            <input type="radio" checked name="secrecy" value="sex" id="sex" />保密
          </label>
        </div>
        <!-- 复选框 -->
        <div>
        <label for="hobby">爱好:</label>
          <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>唱</label>
          <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>跳</label>
          <label for="hobby"><input type="checkbox" value="hobby" name="hobby[]" id="hobby"/>Rap</label>
          <label for="hobby"><input checked type="checkbox" value="hobby" name="hobby[]" id="hobby"/>篮球</label>
        </div>
        <!-- 下拉框 -->
        <div>
        <select>
            <option value="0" required disabled>--请选择--</option>
            <option value="1">唱</option>
            <option value="2">跳</option>
            <option value="3">Rap</option> 
            <option value="4" selected>篮球</option> 
        </select>
        </div>
        <!-- 多行文本框 -->
        <div>
            <label for="">个人简介: 
                <br>
                <textarea name="" id="" cols="30" rows="7" placeholder="老师好，我是练习时长两年半的个人练习生ikun。喜欢唱、跳、rap、篮球。"></textarea>
            </label>
        </div>
        <!-- 图片 -->
        <div>
            <label for="picture">
                <input type="image" src="./0313image/1.png" alt="同意" width="220px" id="picture" onclick="alert('密码输入正确')">
            </label>
        </div>
        <div>
            <button>提交</button>
            <input type="reset" value="重置">
        </div>
      </fieldset>
    </form>
  </body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：完成的很好，只是在提交的时候要在状态那一栏选择作业进行提交

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML表单和常用属性

2023-03-14 01:05:30