<form><textarea><label><fieldset><legend><optgroup><button>标签整理

最新推荐文章于 2023-11-15 09:33:41 发布

阿斯卡Asika

最新推荐文章于 2023-11-15 09:33:41 发布

阅读量1k

点赞数 1

分类专栏： html 文章标签：标签表单

本文链接：https://blog.youkuaiyun.com/sipallan/article/details/51223294

版权

html 专栏收录该内容

10 篇文章

订阅专栏

`<form>`基本用法

表单用<form>定义，输入的内容用<input>定义

<form>
first name:
<input type="text" name="first name"/>
<br/>
last name:
<input type="text" name="last name"/>
</form>

`<form>`标签

<form>
<form action="xxxx.asp" method="get">
<p>first name<input type="text" name="fname"/></p>
<p>last name<input type="text" name="lname"/></p>
<input type="submit" value="submit"/>
</form>

`<form>`属性

action 规定当提交表单时向何处发送表单数据
method 规定用于发送 form-data 的 HTTP 方法
name 规定表单的名称
target 规定在何处打开 action URL
novalidate 提交表单时不需要验证(h5)
enctype 规定在发送表单数据之前如何对其进行编码
autocomplete 规定是否启用表单的自动完成功能(h5)
accept-charset 规定服务器用哪种字符集处理表单数据

`<form>`中还能使用如下标签

`<textarea>`

多行的文本输入控件，可输入无限数量的文本，浏览器不允许 textarea 中存在另一个 textarea

`<textarea>` 属性

autofocus 在页面加载后自动获得焦点(h5)

<textarea autofocus>
我是一个文本输入控件，加载完成后浏览器会把焦点给我
</textarea>

cols和rows 规定文本框的行数和宽度

<textarea rows="3" cols="20">
规定文本框的行数和宽度
</textarea>

disable 禁用文本框
可以设置 disabled 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该文本区的使用。然后，可以使用 JavaScript 来清除 disabled 属性，以使文本区变为可用状态。

<textarea rows="2" cols="30" disabled="disabled">
这是一个test。
</textarea>

form 设置位于表单之外的文本区域（但仍然是表单的一部分）(h5)

<form action="demo_form.asp" id="usrform">
Name: <input type="text" name="usrname">
<input type="submit">
</form>
<textarea name="comment" form="usrform">输入文本...</textarea>

maxlength 规定文本区域的最大字数

<textarea maxlength="50">
Enter text here...
</textarea>

name 为textarea规定名称

<textarea rows="3" cols="20" name="W3School_text">
这里的name规定了该元素的名称
</textarea>

placeholder 为文本框设置简单提示

<textarea placeholder="我是一个提示">
</textarea>

readonly 规定文本框为只读

<textarea rows="3" cols="20" readonly="readonly">
这段话只能看不能修改
</textarea>

required 规定文本框必填（这是h5新增的属性，Internet Explorer 和 Safari 都不支持 required 属性）

<form action="demo_form.asp">
  <textarea name="comment" required></textarea>
  <input type="submit">
</form>

wrap 规定文本框内容的换行方式(soft和hard是h5）

<textarea wrap="soft/hard/virtual/physical"></textarea>
<!--soft 当在表单中提交时，textarea 中的文本不换行-->
<!--hard 当在表单中提交时，textarea 中的文本换行（包含换行符）。当使用 "hard" 时，必须规定 cols 属性-->
<!--virtual 客户端自动换行，但提交到服务端时不换行-->
<!--physical 客户端自动换行，提交到服务端也自动换行-->

`<label>`

标签为标签为 input 元素定义标注，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

`<label>`的属性

for 规定 label 绑定到哪个表单元素

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

form 规定 label 字段所属的一个或多个表单(h5)

<form action="demo_form.asp" method="get" id="genderform">
<label>Male
<input type="radio" name="sex" id="male" value="male" />
</label>
<br />
<label>Female
<input type="radio" name="sex" id="female" value="female"  />
</label>
<input type="submit" value="提交" />
</form>
<p>用于第一个单选按钮的 label 位于 form 元素之外，但仍然是表单的一部分。请尝试点击这个 label，可以切换到 radio 控件。</p>
<label for="male" form="genderform">Male</label>
</body>
</html>

`<fieldset>`

<fieldset>标签可将表单内的相关元素分组

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

`<legend>`

为分组的元素定义标题

`<fieldset>`的属性

disable 禁用fieldset，内容不可填写

<form>
  <fieldset disabled="disabled">
    <legend>Personalia:</legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
  </fieldset>
</form>

form 规定所属的一个或多个表单

<form action="/example/html5/demo_form.asp" method="get" id="iceform">
你喜欢什么口味的冰激凌？<input type="text" name="icecream" /><br />
<input type="submit" />
</form>
<p>下面的 fieldset 位于 form 元素之外，但仍然是表单的一部分。</p>
<fieldset form="iceform">
  <legend>Personalia:</legend>
  Name: <input type="text" name="usrname"/><br />
  Email: <input type="text" name="usrmail" /><br />
  Date of birth: <input type="text" name="usrdate" />
</fieldset>

name 规定fieldset的名称

创建单选或多选菜单

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select>属性
- autofocus 在页面加载后自动获得焦点(h5)
- disable 禁用disable，不可填写内容
- form 规定所属的一个或多个表单(h5)
- multiple 规定可选择多个选项，需要借助windows-ctrl或- - mac-command多次选择
- size 规定可见选项的数目

<select multiple="multiple" size="2">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

name 规定名称
required 规定文本必填
selected 带有预选值的下拉列表

<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>

`<optgroup>`

optgroup 元素用于组合选项

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

optgroup属性

label，为选项组规定描述(必须)
disable，禁用该选项组，变得不可选

`<button>`

button 定义了一个按钮
在表单中慎用button，如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。
<button value="button">click me</button>

`<button>`的属性

type 规定按钮的类型，始终为按钮规定 type 属性，IE默认值是button，其他浏览器的默认值是submit
type有三个选择：button,submit,reset
value 规定发送的值
name 规定按钮的名称
disable 禁用该按钮
autofocus 加载完成后自动获得焦点(h5)
form 规定按钮属于一个或多个表单(h5)
formaction
formenctype
formmethod
formnovalidate
formtarget
以上formXXXX的属性覆盖form元素的相关属性，和type=”submit”配合使用