HTML基础 表单

HTML基础 表单

什么是表单：

专门收集用户信息的

表单格式：

<form>
    <input>
</form>

input标签

<input type="text"> <!--明文输入-->
<input type="password"> <!--密码输入-->
<input type="text" value="123"> <!--设置默认值-->
<!--单选框-->
<input type="radio" name="sex">man 
<input type="radio" name="sex">woman <!--必须设置相同的name才能互斥 要想默认选择需要加checked="checked"-->
<!--多选框-->
<input type="checkbox" name="hoby">足球
<input type="checkbox" name="hoby1去21">篮球
<!--按钮-->
<input type="button" value="我是按钮" onclick="alert('lnj')">
<!--图片按钮-->
<input type="img" value="我是按钮" onclick="alert('lnj')">
<!--重置、清空按钮-->
<input type="reset"> <!--重置按钮有默认的标题，默认叫做reset，也可以修改-->
<!--提交按钮-->
<input type="submit"> <!--提交按钮有默认的标题，默认叫做submit，也可以修改-->

提交表单信息到服务器

提交至服务器要满足两个条件，1.要告诉服务器地址，2.要告诉要提交的信息，通过form标签的action属性来定义服务器地址，以交所有有name属性的信息
type="hidden"隐藏提交数据到服务器，隐藏域是不会显示在界面中的

lable标签

用于绑定文字、图片和输入框

<lable for="shuru">账号:</lable><input type="text" id="shuru">
<lable>账号:<input type="text"></lable> <!--有局限性-->

datalist标签

待选项,仅作了解，因为大部分浏览器不支持

账号:<input type="text" list="user">
<datalist id="user">
  <option>dadaeda</option>
  <option>dsadad</option>
  <option>dfef</option>
  <option>da151dsa</option>
  <option>dsd-ds</option>
</datalist>

表单标签H5

了解，因为大部分浏览器不支持

邮箱:<input type="email">
域名:<input type="url">
数字:<input type="number">
时间选择:<input type="data">
取色板:<input type="color">

其他标签

select标签 用于定义下拉列表

<select>
<optgroup label="北京"> <!--用于数据分组，可读性便利性高-->
    <option>1</option>
    <option>2</option>
    <option selected="selected">3</option> <!--设置默认值-->
    <option>4</option>
</optgroup>
<optgroup label="广州">
    <option>5</option>
    <option>6</option>
    <option>7</option>
</optgroup>
</select>

textarea标签 用于多行文本输入

<textarea cols="" rows="">  <!--指定行列数，但还可以无限下伸-->
<!--默认情况下输入框可以拉伸，可以通过css的textarea的"resize:none"属性来改变-->
</textarea>

给表单添加边框

fieldset添加到form中的内容外

<form>
<fieldset> <!--添加边框-->
<textarea cols="" rows="">
</textarea>
</fieldset>
</form>

给表单添加标题

legend添加到fieldset之后

<form>
<fieldset> <!--添加边框-->
<legend>我是标题</legend>
<textarea cols="" rows="">
</textarea>
</fieldset>
</form>