＜HTML＞表单标签

目录

1.表单

1.1创建表单

1.2基本控件

1.2.1单行文本框

1.2.2单选按钮

1.2.3label标签

1.2.4复选框

1.3HTML5新增表单控件

---

1.表单

表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等

1.1创建表单

所有HTML表单都以一个<form>元素开始

1.2基本控件

1.2.1单行文本框

• 使用type属性值被设置为text的<input>元素可以创建单行文本框，是一个单标签

<form action="" method="post">
   <p>
       请输入你得姓名：<input type="text">
   </p>
</form>

 

•  value属性表示已经填写好的值

<form action="" method="post">
    <p>
        请输入你得姓名：<input type="text" value="132">
    </p>
</form>

• placeholder属性表示提示文本，将以浅色文字写在文本框中，并不是文本框中的值

<form action="" method="post">
    <p>
        请输入你得姓名：<input type="text" placeholder="请输入姓名">
    </p>
</form>

 

•  disabled属性表示用户不能与元素交互，即“锁死”

<form action="" method="post">
    <p>
        请输入你得姓名：<input type="text" disabled>
    </p>
</form>

1.2.2单选按钮

• 使用type属性值radio的<input>元素可以创建单选按钮

<p>
    请输入你得姓名：<input type="radio" >
</p>

•  互斥的单选按钮应该设置相同的name值

 

•  单选按钮要有value属性值，向服务器提交的就是value值

•  单选按钮如果加上了checked属性，表示默认被选中

1.2.3label标签

• label标签用来将文字和单选按钮进行绑定，用户单击文字也视为单击单选按钮
• HTML4时代，label标签通过for属性和单选按钮的id属性绑定

1.2.4复选框

• 使用type属性值为checkbox的<input>元素

<p>
    爱好：
    <label>
        <input type="checkbox" name="hobby" value="足球">足球
    </label>
    <label>
        <input type="checkbox" name="hobby" value="篮球">篮球
    </label>
    <label>
        <input type="checkbox" name="hobby" value="羽毛球">羽毛球
    </label>
    <label>
        <input type="checkbox" name="hobby" value="游泳">游泳
    </label>
</p>

 

1.3HTML5新增表单控件

.