HTML—input表单属性

action属性值是接受提交数据的执行程序地址

        method是表单数据提交的方式

get是显性的 用户提交的信息再地址栏能看到

post是隐性的 用户提交的数据再地址栏能看不到 登陆注册 都是post的方式

 <form action="qn.js" method="post">
        <input type="text">
    </form>

表单类型

文本域       密码域

 <input type="text" name="username" id="" value="请输入姓名" /><!-- 文本域 -->
<input type="password" name="pwd" id="" value="请输入密码" /><!-- 密码域 -->

 

单选框     复选框

        <p>
            <!-- 单选框 -->
            性别：<input type="radio">男<input type="radio">女
        </p>
        <p>
            <!-- 复选框 -->
            爱好：<input type="checkbox">篮球<input type="checkbox">足球<input type="checkbox">网球
        </p>

 

 下拉框   多行文本

        <p>
           <!-- 下拉框-->
				生日：<select name="">
					<option value="">1999</option>
					<option value="">2000</option>
					<option value="">2001</option>
				</select>
        </p>
        <p>
            <!-- 多行文本 -->
		自我介绍：<textarea rows="" cols="">
                    					
				</textarea>
        </p>

 

 

 

        <p>
         <!-- 文件域 -->
				<input type="file" name="" id="" value="" />
        </p>
        <p>
            <!-- 重置按钮 -->
            <input type="reset" name="" id="" value="重置按钮" />
        </p>

        <p>
            <!-- 普通按钮 -->
            <button type="button">普通按钮</button>
        </p>
        <p>
            <!-- 提交按钮 -->
            <input type="submit" value="提交"/>
        </p>
        <p>
            <!-- 图片按钮 -->
            <input type="image" name="" id="" value="" src="./vscode/猫咪小.png"/>
        </p>

 

 

			<p>
				<!-- 网址控件 -->
				<input type="url">
			</p>
			<p>
				<!-- 邮件控件 -->
				<input type="email" >
			</p>
				

 

 

 

			<p>
				<!-- 日期控件 -->
				<input type="date">
			</p>
			<p>
				<!-- 时间控件 -->
				<input type="time">
			</p>

 

 

 

			<p>
				<!-- 数字控件 step="5"每次5个跳动-->
				<input type="number" step="5">
			</p>
				
			<p>
				<!-- 滑块控件 step="10"有10个过渡 -->
				<input type="range" step="10">
			</p>

 

 

 

 表单属性

                value是默认值

                label获取鼠标的焦点

                placeholder是提示文案

                maxlength允许输入最大字符长度 防止恶意注册

                size控制表单宽度

                readonly只读属性

                disabled禁用属性

        <p>
            <label for="username-1">姓名</label>
            <input type="text" name="username" id="username-1" value="" placeholder="请输入姓名" />
        </p>

        <p> 
            <label for="username-2">姓名</label>
            <input type="text" name="username" id="username-2" value="" placeholder="请输入姓名" maxlength="4" />
        </p>

        <p>
            <label for="username-3">姓名</label>
            <input type="text" name="username" id="username-3" value="" placeholder="请输入姓名" size="10" />
        </p>
        <p>
            <label for="username-1">姓名</label>
            <input type="text" name="username" id="username-1" value="" placeholder="请输入姓名" readonly/>
        </p>
        <p>
            <label for="username-1">姓名</label>
            <input type="text" name="username" id="username-1" value="" placeholder="请输入姓名" disabled/>
        </p>
        <p> 性别
            <label for="man">男</label>
            <input type="radio" name="sex" id="man" value="" />
            <label for="woman">女</label>
            <input type="radio" name="sex" id="woman" value="" checked />
        </p>

 

 

 

        <p>
            <!-- 下拉单默认选中 selected -->
            年龄
            <select name="age" size="1">
                <option value="2000">2000</option>
                <option value="2001" selected>2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
            </select>
        </p>
        <!-- size 显示行数 -->
        <p>
            年龄
            <select name="age" size="2">
                <option value="2000">2000</option>
                <option value="2001" selected>2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
            </select>
        </p>