HTML 表单

目录

表单组件

type:文本类型

表单组件属性

表单验证

---

表单组件

<span>文本标签

<label>文本标签

<form>:表单标签

action：提交路径 method：提交方式（get丨post）

<button>按钮标签

<select>...<option>:下拉框 selected设置默认值

<textarea>:文本域丨多行文本框 cols设置宽度 rows设置高度

<input/>:

name:设置名字

size:设置大小

maxlength:设置最大字符数

minlength:设置最小字符数

<!--下拉框-->
<select>
    <option>1</option>
    <option>2</option>
</select>
<!--多行文本域-->
<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >

type:文本类型

text:文本框丨输入框（默认值）

password:密码框

radio:单选按钮 name属性值必须一致 checked默认选择

checkbox:复选框丨多选框 name属性值必须一致 checked默认选择

button:普通按钮

image:图片按钮 src路径

reset:重置按钮

submit:提交按钮

file:文件域 必须在from标签中添加enctype="mulitipart/form-data"

email:邮箱

url:网址

search:搜索框

number:数字框 min设置最小值 max设置最大值 step步长

range:滑块 min设置最小值 max设置最大值 step步长

tel:电话号

datetime-local:日期选择

color:选择颜色

hudden:隐藏域

<form method="post" action="index0.html">
        <!--文本框-->
        <input  type="text"  name="userName" value="用户名" size="30" maxlength="20"/> 
        <!--密码-->
        <input  type="password "  name="pass"  value="密码" size="20" /><br />
        <!--单选按钮-->
        <input name="gen" type="radio" value="男"  checked  />男
        <input name="gen" type="radio" value="女" />女<br />
        <!--复选框-->
        <input type="checkbox" name="interest" value="sports"/>运动
        <input type="checkbox" name="interest" value="talk" checked />聊天
        <input type="checkbox" name="interest" value="play"/>玩游戏<br />
        <!--列表框-->
        <select name="列表名称" size="行数">
        <option value="选项的值" selected="selected">…</option >
        <option value="选项的值">…</option >
        </select><br />
        <!--按钮-->
        <input  type="reset" name="butReset" value="reset按钮">
        <input  type="image"  src="images/login.gif" />
        <input  type="button" name="butButton" value="button按钮"/><br />
        <!--多行文本域-->
        <textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  ><br />
        <!--文件域-->
        <form action="" method="post" enctype="multipart/form-data">
        <p><input type="file" name="files" />
        <input type="submit" name="upload" value="上传" /></p>
        </form><br />
        <!--邮件-->
        <p>邮箱:<input type="email"  name="email"/></p>
        <input type="submit"/><br />
        <!--网址-->
        <p>请输入你的网址:<input type="url"  name="userUrl"/></p>
        <input type="submit"/>
        <!--数字-->
        <p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
        <input type="submit"/>
        <!--滑块-->
        <p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
        <input type="submit"/>
        <!--搜索框-->
        <p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
        <input type="submit"/>
</form>


<form method="post" action="index0.html">
        账号：<input type="text"  value="用户名" /><br />
        密码：<input type="password"  value="123" maxlength="6"/><br />
        <input type="radio" name="xingbie" checked="checked" />男
        <input type="radio" name="xingbie" />女<br />
        <input type="checkbox" name="xq"  value="chang" />唱
        <input type="checkbox" name="xq"  value="tiao" />跳
        <input type="checkbox" name="xq"  value="rap" checked="checked" />rap<br />
        <input type="button" value="普通按钮"/>
        <button>按钮</button>
        <input type="image" src="img/loginIcon.gif" />
        <input type="submit" value="提交"/>
        <input type="reset" value="清空" />
</form>

表单组件属性

readonly：只读

disabled：禁用

表单验证

placeholder：输入提示

requirded：非空验证

pattern：正则表达式校验

<label for="nc">昵称</label><input type="text" placeholder="kxxw"  id="nc" required pattern="[-\u4E00-\u9FA5]{4,10}" />    <!--长度为4-10个字符-->