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>
        <!-- 文本框 -->
        <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>

批改老师：

PHPz

批改状态：合格

老师批语：完成的很好，继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML表单和常用属性

2023-03-14 01:05:30