表单简介及应用

1.初始表单post和get提交

表单简介及应用_第1张图片

表单元素格式

属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button,默认text
name 指定表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽度。但type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位。
maxlength type为text或password时,输入的最大字符数
checked type为radio或checkbox时,指定按钮是否被选中

2.表单的内容

按钮、多选框、文本框、单选框、列表框文本域、文件域、搜索框滑块、简单验证

3.表单的应用

表单的应用

  • 隐藏域:hidden
  • 只读:readonly
  • 禁用:disabled

4.表单初级验证

表单初级验证

  • 常用方式
    • placeholder:提示信息
    • required:非空判断
    • pattern:正则表达式
DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>表单title>
head>
<body>

<h1>注册h1>

<form action=""1.初始网页.html"" method=""get"">
    
    
    
    <p> 名字: <input type=""text"" name=""username"" placeholder=""请输入用户名"" required> p>

    
    <p> 密码: <input type=""password"" name=""password"" placeholder=""请输入密码"">p>

    
    <p>性别:
        <input type=""radio"" value=""boy"" name=""sex""/><input type=""radio"" value=""girl"" name=""sex"">p>
    
    <p>爱好:
        <input type=""checkbox"" value=""sleep"" name=""hobby"">睡觉
        <input type=""checkbox"" value=""code"" name=""hobby"">敲代码
        <input type=""checkbox"" value=""chat"" name=""hobby"">聊天
        <input type=""checkbox"" value=""game"" name=""hobby"">游戏
    p>
    
    <p>按钮:
        <input type=""button"" name=""btn1"" value=""点击"">
        
    p>

    
    <p>下拉框:
        <select name=""列表名称"">
            <option value=""china"">中国option>
            <option value=""us"">美国option>
            <option value=""se"">瑞士option>
            <option value=""uk"">英国option>
        select>
    p>

    
    <p>反馈:
        <textarea name=""textarea"" cols=""30"" rows=""10"">文本内容textarea>

    p>

    
    <p>上传文件:
        <input type=""file"" name=""files"">
    p>
    
    <p>邮件验证:
        <input type=""email""name=""email"">
    p>
    
    <p>URL:
        <input type=""url"" name=""URL"">
    p>
    
    <p>数字:
        <input type=""number"" name=""number"" max=""100"" min=""0"" step=""1"">
    p>
    
    <p>滑块:
        <input type=""range"" name=""voice"" min=""0"" max=""100"" step=""1"">
    p>
    
    <p>
        <input type=""search"" name=""search"">
    p>
    
    <p>
        <label for=""mark"">你点我试试label>
        <input type=""text"" id=""mark"">
    p>

    <p>
        
        <input type=""submit"">
        <input type=""reset"" value=""清空表单"">
    p>
form>

body>
html>

你可能感兴趣的:(前端,#,HTML,前端,html)