form表单

目录

form表单

格式：

文本输入框

密码输入框

提交按钮

单选框

多选框

文件上传

重置按钮

按钮标签

下拉选择框

可输入区域

可拉伸

设置css样式限制

隐藏域

文本表单

---

form表单

格式：

        <form action="" method="">
			
		</form>

        action:后台地址
        method:请求方式： 
        get:会明文展示（拼在网址上）不够安全 更快捷
        post:不会明文 更安全 传输内容比较大（比如上传文件）

文本输入框

                type="text"   

      name：给后台传值的描述（key、键）
      placeholder:提示文字
      value：表单元素的默认值 

            <span>用户名</span>
			<!-- 文本输入框 -->
			<input type="text" name="user" value="tt" placeholder="请输入用户名"/>

密码输入框

        type="password"

<span>密码</span>
<!-- 密码输入框 -->
<input type="password" name="pass"/>

提交按钮

        type="submit" 

<input type="submit" value="登录"/>

单选框

        type="radio"

<!-- 单选框 -->
<p>请选择性别</p>
<span>男</span>
<input type="radio" name="sex" />
<!-- <span>女</span> -->
<input type="radio" name="sex" />

多选框

        type="checkbox"

            <!-- 多选框 -->
			<p>兴趣爱好</p>
			<span>看书</span>
			<input type="checkbox" />
			<span>学习</span>
			<input type="checkbox" />
			<span>睡觉</span>
			<input type="checkbox" />

文件上传

         type="file"

<!-- 文件上传 -->
<p>请上传照片</p>
<input type="file" />

重置按钮

        type="reset"

<!-- 重置按钮 -->
<input type="reset" />

按钮标签

        type="button"

<!-- 按钮标签 -->
<input type="button" value="我是一个普通按钮" />
<button>我也是一个按钮</button>

下拉选择框

           <select name="">
                <option value=""></option>
            </select>

!-- 下拉选择框 -->
<p>请选择年龄</p>
<select>
	<option>--请选择--</option>
	<!-- selected="selected"：默认选中  selected也行-->
	<!-- <option selected="selected">10~20岁</option> -->
	<option selected>10~20岁</option>
	<option>20~30岁</option>
	<option>30~40岁</option>
</select>

可输入区域

        <textarea></textarea>

可拉伸

<!-- 可输入区域 -->
<p>请留言</p>
<textarea></textarea>

设置css样式限制

<style type="text/css">
	textarea{
		width: 200px;
		height: 200px;
		resize: none;
	}
</style>

隐藏域

        type="hidden"

<!-- 隐藏域 -->
<input type="hidden" value="123" name="hidden"/>

文本表单

        readonly只读 
        disabled不可操作（不可读不可写）

<input type="text" readonly="readonly" />
<input type="text" disabled="disabled" />