HTML-表单

表单主要用于收集用户信息

表单的组成

一个完整的表单包括表单域、表单控件（表单元素）和提示信息3个部分组成。

一.表单域

表单域是一个包含表单元素的区域

<from>会把它范围内的元素信息提交给服务器

基本格式

<from action="url地址" method="提交方式" name="表单域名称">

各种表单元元素控件

</from>

二.表单元素

1.input输入表单元素

2.select下拉表单元素

3.textarea文本域元素

1.input输入表单元素

（1）type属性文本及密码输入框

 例如，text定义单行输入：

 <from>
        <!-- text 文本框 用户可以在里面输入任何文字 -->
        用户名：<input type="text"> <br>
        密码：<input type="text"><br>
        掩盖密码：<input type="password"><br>
        <!-- radio定义单选按钮 ，可实现单选一-->
        性别：男<input type="radio">女<input type="radio"><br>
        <!-- checkbox定义复选框 可实现多选-->
        兴趣爱好：唱歌<input type="checkbox">跳舞<input type="checkbox">睡觉<input  type="checkbox"><br>
       
     </from>

运行结果如下 

 input其他常用的标签如下

 name值和value值是每个表单元素都有的属性值

 name是表单元素名字，主要时区别不同的表单元素，name属性后面的值是自定义的，r

 性别：男<input type="radio" name="sex">女<input type="radio" name="sex"><br>

 运行结果

checked="checked“属性设置打开页面时默认选中按钮

<!-- checked属性设置表示单选框或者复选框打开时默认选择该按钮 -->
       性别：男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"><br>
       兴趣爱好：唱歌<input type="checkbox">跳舞<input type="checkbox" checked="checked">睡觉<input  type="checkbox" checked="checked"><br>

 运行结果

 maxlegth="XX"设置输入字段的最大值

用户名：<input type="text" maxlength="6"> <br>

 

 radio是一组时必须命名相同的名字,即name一致

<input type="radio" name="sex">女

<input type="radio" name="sex">男

!-- 点击了提交按钮，可以把表单域form的表单元素提交给后台服务器-->
       <input type="submit" value="注册">
       <!-- reset重置按钮还原表单元素初始的默认状态 -->
       <input type="reset" value="重新填写"><br>

  <!-- 普通按钮button 后期与JS结合使用 -->
       <input type="button" value="获取短信验证码"><br>
       <!-- 文件域使用，上传文件使用 -->
       <input  type="file">

 

 （2）label标签

<label>是元素定义标注，用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转移到对应的表单元素上以增加用户体验

基本语法：

<!-- label标签的for属性与相关元素的id属性相同 -->
       <label for="sex">男</label>
       <input type="radio" name="sex" id="sex">
       <label for="text">用户名</label>
       <input type="text" id="text"><br>

2.select下拉表单元素

节约空间，让用户进行选择，双标签

基本语法：

<select>

<option>xxx</option>

<option>xxx</option>

</select>

示例

专业：
       <select>
           <option>计算机科学与技术</option>
           <option>通信工程</option>
           <option>物联网工程</option>
       </select>

结果

 

 注意：<select>中至少包含一对<option>

在<option>中定义selected="selected"时，表示当前选项为默认项

例如

国籍：
       <select>
           <option selected="selected">中国</option>
           <option>美国</option>
           <option>日本</option>
           <option>俄罗斯</option>
           </select>

3.textarea文本域元素

<textarea>文本域可以定义多行输入的情况，适合留言，双标签

基本语法：

<textarea>

</textarea>

今日学习感想：
            <textarea>

            </textarea><br>
            留言栏
            <textarea col="50",row="6">
                今天想吃虾仁番茄面

            </textarea>

运行结果