html表单

2018-04-19  本文已影响19人  child_cool
<!-- 表单域
    1.action 后台处理程序
    2.method 数据的提交方式
     -->
    <form action="1.php" method="get">

        <!-- 表单控件 input
        1.type: 文本格式(text) 密码(password) 单选控件(radio)多选控件(checkbox)资源上传控件(file)隐藏控件(hidden)
        2.name 字段名
        3.maxlength 最大长度
        4.readonly disabled 禁止输入
        5.value 默认文字
        6.id 编号
        7.checked 默认选中
         -->
         <!-- fieldset 分组控件 -->
         <!-- legend 标题 -->
    <fieldset>

        <legend>人员注册信息</legend>

        昵称:<input type="text" name="nick" maxlength="6" readonly disabled value="请输入昵称" id="">
        <br>
        密码:<input type="password" name="password" maxlength="6">
        <br>
        确认密码:<input type="password" name="">
        <br>

        性别: 
        <input type="radio" name="gender" checked> 男    
        <input type="radio" name="gender"> 女

        <br>

        <!-- 表单控件 下拉控件(select)
        1.option 选项
        2.selected 默认选中
        3.multiple 多选
         -->
        籍贯:

        <select>
            <option>山东</option>
            <option>河南</option>
            <option>河北</option>
            <option selected>广东</option>
        </select>
        其他写法:
        <select>
            <optgroup label="河北省">
                <option>张家口</option>
                <option>石家庄</option>
                <option>保定</option>
                <option>邯郸</option>
                <option>章北</option>
            </optgroup>
        </select>


        <br>

        爱好:
        <input type="checkbox">学习
        <input type="checkbox">lol
        <input type="checkbox">电影
        <input type="checkbox">吃
        
        <br>
        请上传图片:
        <input type="file" name="">

        <br>

        <!-- 多行文本域 -->
        个人简介:<textarea></textarea>

        <!-- 隐藏控件 -->
        <input type="hidden" name="" value="111">

        <br>
        <!-- 提交按钮 -->
        <input type="submit" name="">

        <br>
        <!-- 普通按钮 -->
        <input type="button" name="" value="按钮">

        <br>
        <!-- 重置按钮 -->
        <input type="reset" name="">
        <br>
        <!-- 图片提交按钮 -->
        <input type="image" name="" src="1.jpg">
    </fieldset>
    </form>

html5 中的标签

<!-- html5标签 -->
        <!-- 邮箱输入 -->
        <input type="email" name="">
        <br>
        <!-- 只能输入数字 -->
        <input type="number" name="" step="5">
        <br>
        <!-- url -->
        <input type="url" name="">
        <!-- 日期 -->
        <input type="date" name="">
        <!-- 时间 -->
        <input type="time" name="">
        <!-- 时间选择 -->
        <input type="datetime" name="">
        <!-- 周选择 -->
        <input type="week" name="">
        <!-- 取色器 -->
        <input type="color" name="">
        <!-- 滑块 -->
        <input type="range" name="" value="10">
        <!-- 搜索标签语义化 -->
        <input type="search" name="">
        <!-- 手机号 -->
        <input type="tel" name="">

其他标签

<input type="text" name="" list="dt">
       <datalist id="dt">
           <option value="bj">北京</option>
       </datalist>

html中的属性

<!-- 
           placeholder 提示文字
           autofocus 默认选中该输入框为输入状态
           autocomplete 输入记录 off关闭
           required 必须填写,否则不能提交
        -->
       <input type="text" name="" placeholder="提示文字" autofocus autocomplete="off" required>
上一篇 下一篇

猜你喜欢

热点阅读